Jakiś wskazówki do czego spasować id by kilknięty button znikał tylko current note(boollean) {react}

Question

Prosiłbym o wskazówkę gdzie i jak match id by button o tym samym id zamykał jedynie siblinga(textarea) o tym samym id

Kod z  App

	{[...Array(noteID).keys()].map((item) => {
				return <Notes key={item} noteID={item} Shown={show} toggle={() => SetShow(!show)} />;
			})}

Notes 

function Notes(props) {
	return (
		<div key={props.noteID}>
			{props.Shown ? <textarea key={props.noteID} placeholder="Text Goes Here" /> : null}
			<button key={`Note` + props.noteID} onClick={props.toggle}>
				Note {props.noteID + 1}
			</button>
		</div>
	);
}
export default Notes;

 

Comments

Jak dostać się do

e.target (element key)

import { useState } from "react";

function Notes(props) {
	const [Shown, setShown] = useState(true);

	function toggle(e) {
		const textarea = e.target.textarea;
		const button = e.target.button;

		console.log(`textare: ${textarea}, button: ${button}`);
		e.preventDefault();
		setShown(!Shown);
	}

	return (
		<form action="return false" key={props.noteID} onSubmit={toggle}>
			{Shown ? <textarea key={props.noteID} placeholder="Text Goes Here" name="textarea" /> : null}
			<button key={`Note` + props.noteID} type="submit" name="button">
				Note {props.noteID + 1}
			</button>
		</form>
	);
}
export default Notes;

if(textarea(key)===button(key){

setShown(!Shown);

)

 

---

Czy możesz czytelniej opisać swój problem? Chcesz usunąć textarea na kliknięcie w przycisk - w jakim celu?

---

Togglować na przycisk. By dany przycisk zamykał jedynie swojego "Brata"

Answer 1

Przycisk zamykał jedynie swojego siblinga (textarea) rowiązanie jest pod spodem. Przeniosłem kilk na forma i on toggle textarea

Jedna notka

function Notes(props) {
	const [Shown, setShown] = useState(props.show);

	function toggle(e) {
		e.preventDefault();
		setShown(!Shown);
	}

	return (
		<form action="return false" key={props.noteID} onSubmit={toggle}>
			{Shown ? <textarea key={props.noteID} placeholder="Text Goes Here" name="textarea" /> : null}
			<button key={`Note` + props.noteID} type="submit" name="button" onClick={props.selected}>
				Note {props.noteID + 1}
			</button>
		</form>
	);
}

Tablica Notek

import { react, useState } from "react";
import Notes from "./Notes";
function Notepad() {
	const [noteID, setNoteID] = useState(0);
	const [visible, SetVisible] = useState(false);
	function handleSubmit(e) {
		e.preventDefault();
		setNoteID((prevValue) => prevValue + 1);
	}
	function currentNote(e) {
		e.preventDefault();
	}
	return (
		<div>
			<button onClick={handleSubmit}>New Note</button>
			{[...Array(noteID).keys()].map((item) => {
				return <Notes key={item} noteID={item} selected={currentNote} show={visible} />;
			})}
		</div>
	);
}
export default Notepad;