How to fetch object array from node using Axios - node.js

Question

I need to store the data from the response in state. once the axios call has been made and returned some data, the useEffect function will be called and cause the task list array to be populated. The result of which can then be iterated over and displayed on the front end.
import{ useEffect, useState} from 'react'
import axios from 'axios';
function Todo() {
const [toDos,setToDos] =useState([])
function HandleSubmit(e) {
e.preventDefault();
let request ={
list : toDos
}
let taskList = axios.post('http://localhost:8080/Todo',request)
.then(resp=>{
alert(resp.data.message);
})
.catch( err=>{
console.log(err);
})
const [tasks,setTasks] = useState([]);
useEffect(()=>{
setTasks(taskList);
},[taskList]);
}
return (
<div >
<h1>ToDo List</h1>
<form onSubmit={HandleSubmit}>
<input type="text" placeholder=" Add item..." name="list" value={toDos} onChange={(e)=>setToDos(e.target.value)}/>
{tasks.map(()=>{
return(
<div>
<h1>{tasks}</h1>
</div>
)
})}
<button id="btn" type="submit">Add</button>
</form>
</div>
);
}
export default Todo;
node code
const lists =[
{toDo:"learn react"}
]
app.post('/Todo',function(req, res){
lists.push({ "toDo":req.body.list})
console.log(lists)
res.status(200).send({ message: "Task added!!"})
}
)
Line 23:16: 'tasks' is assigned a value but never used no-unused-vars
ERROR in [eslint]
src\Todoapp\Todo.js
Line 36:10: 'tasks' is not defined no-undef
Line 39:20: 'tasks' is not defined no-undef
Search for the keywords to learn more about each error.
this is error anyone can please help

Answer 1

Define state and in component level and remove useEffect. Don't define state and effect in functional level
function Todo() {
const [tasks,setTasks] = useState([]);
.....
Then set the values inside the then
axios.post('http://localhost:8080/Todo',request)
.then(resp=>{
setTasks(resp.data.message);
})
.catch( err=>{
console.log(err);
})
}