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;