Dostaję błąd przy próbie nadpisanie obiektu w tablicy {JS}

Question

Jest tu funkcja nadpisująca state w którym jest tablica z notakmi 

Pojedyncza notka

const note = {
			id: new Date().getTime(),
			text: "# Text goes Here",
		};

Przy próbie zamiany value w note.text dostaję błedy 

Cannot read properties of undefined (reading 'id')

Funkcja updateująca note.text  

	function updateNote(e) {
		const { name, value, id } = e.target;
		setNotes((oldNotes) =>
			oldNotes.map((note) => {
				if (note.id === id) return { ...note, [name]: value };
				else return note;
			})
		);
	}

Child

					<Notes newNote={notes} updateNote={updateNote} />

Notes

function Notes(props) {
	const noteElements = props.newNote.map((note, index) => {
		return (
			<div key={note.id}>
				<button key={note.id}>note {index + 1}</button>
				<textarea key={note.id + 10} name="text" value={note.text} onChange={props.updateNote}></textarea>
			</div>
		);
	});

	return noteElements;
}

 

Comments

    const [notes, setNotes] = useState([]);

    function addNote() {

        const note = {

            id: new Date().getTime(),

            text: "# Text Goes Here",

            on: true,

        };

        setNotes((prevNote) => [note, ...prevNote]);

    }

 

---

Możesz to wystawić na codesandbox? Ja tutaj nie widzę, czemu ten undefined miałby się pojawić.

---

Link do codesandbox

---

Klikam po tym i żaden błąd się nie pojawia. Pomijam, że nie da się nic w pisać w textarea, bo wołając props.updateNote na onChange, przekazujesz tam tą samą wartość note.text zamiast tego, co właśnie wpisał użytkownik z event.target.value:

onChange={({ target: { value } }) => {
  props.updateNote(note.id, value)
}}

 

---

Dokładnie o to mi chodziło, dzięki