I am working on a TO-DO List React App. The goal is, that every time the user clicks on the “Add” button the saveNote() function gets called and a new note is added to the notesobject. Then the page should automatically re-render and by that the addNote() function gets called and returns all notes within notes object as a new <li> item.
Right now adNote()only gets called after I clicked on the Addbutton and start entering a new note .. why?
import React from "react";
// import Note from "./Note";
const notes = [
{
id: 1,
content: "Test"
}
];
let counter = 1;
function App() {
const [note, setNote] = React.useState("");
function createNote(event) {
setNote(event.target.value);
}
function saveNote() {
counter++;
notes.push({ id: counter, content: note });
console.log(notes);
}
function addNote(note) {
return (
<li key={note.id}>
<span>{note.content}</span>
</li>
);
}
return (
<div className="container">
<div className="heading">
<h1>To-Do List</h1>
</div>
<div className="form">
<input onChange={createNote} value={note} type="text" />
<button onClick={saveNote} type="submit">
<span>Add</span>
</button>
</div>
<div>
<ul>
<li>A Item</li>
{notes.map(addNote)}
</ul>
</div>
</div>
);
}
export default App;
