set in useState does not reload the data on the page [duplicate] - reactjs

Question

This question already has answers here:
Correct way to push into state array
(15 answers)
Closed 2 months ago.
I just started learning how to work with React and I ran into a problem that I still can't seem to solve.
I'm trying to program a simple app for adding tasks like a simple to-do list.
But when I want to add a task and save the data via useState, the new data is not written to the page.
i have code in file AllTasks.js:
const [myTasks, setMyTasks] = useState(data);
const tasksHandler = (id) => {
const filteredTasks = myTasks.filter((oneTask) =>{
return oneTask.id !== id;
})
setMyTasks(filteredTasks);
}
const checkID = () => {
for(let i = 0; i < myTasks.length; i++){
if(i === myTasks.length -1){
return myTasks[i].id + 1;
}
}
}
const addNewTask = (newTask) => {
let task = {
id: checkID(),
name: newTask
};
const newTasks = myTasks;
newTasks.push(task);
setMyTasks(newTasks);
}
const deleteAllTasks = () => {
setMyTasks([]);
}
return(
<div className='tasks'>
<Title />
<AddTasks addTask={addNewTask}/>
{
myTasks.map((oneTask) => {
const {id, name} = oneTask;
return <div className='one-task' key={id}>
<p>{name}</p>
<button onClick={() => tasksHandler(id)}><img src={deleteImg} alt='todoApp'/></button>
</div>
})
}
<button className='main-button' onClick={deleteAllTasks}>Delete all tasks</button>
</div>
)
}
export default AllTasks;
The code in the AddTask.js file that I use to send the new task to the AllTasks.js file
import './AddTask.css';
import addImg from "../img/plus.png";
const AddTask = (props) => {
const add = () => {
const input = document.getElementById('new-task');
const newTask = input.value;
if(input.value.length > 0){
props.addTask(newTask);
}
}
return(
<div className='add-task'>
<input type='text' id='new-task'></input>
<button id='send-task' onClick={add}><img src={addImg} alt='todoApp'/></button>
</div>
)
}
export default AddTask;
I don't understand why when I click on add task and run the addNewTask() function, why doesn't the added task appear on the page? When I upload new data to myTasks via setMyTasks(newTaskt)?
Thank you all for your reply.

Answer 1

This is because you are adding new data inside existing array, react needs a brand new array to update it's state and keep track of state.
In addNewTask function instead of adding element to the existing array you should do
setState((previousStateOfArray) => {
return [...previousStateOfArray, newElement];
})
Or shorthand would be setState(prev => [...prev, newElement])

Answer 2

Try change final line of addNewTask function from setMyTasks(newTasks); to setMyTasks([...newTasks]);

Answer 3

Should use immutable state setting:
setMyTasks([...newTasks]);