I am trying to save the input from a form inside an array using useState. I created a function for clicking an Add button, but the onChange input is not added to the notes array when I click the button. Empty array in the console log. Please be kind enough to point out the problem.
const {useState} = React;
function CreateArea() {
const [newNote, setNote] = useState({
title: "",
content: "",
});
const [notes, setNotes] = useState([]);
console.log(notes);
function addNote() {
setNotes((prevNote) => {
return [...prevNote, newNote];
});
}
function handleChange(event) {
const { value, name } = event.target;
setNote((prevValue) => {
return {
...prevValue,
[name]: value,
};
});
}
return (
<div>
<form>
<input
onChange={handleChange}
name="title"
placeholder="Title"
value={newNote.newTitle}
/>
<textarea
onChange={handleChange}
name="content"
placeholder="Take a note..."
value={newNote.newContent}
rows="3"
/>
<button onClick={addNote}>Add</button>
</form>
</div>
);
}
ReactDOM.render(<CreateArea />, document.getElementById("root"));<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>