I have a state variable tasks, which is an array of objects:
const [tasks, setTasks] = useState([
{
user: "",
text: "Finish this page",
deadline: new Date("05/01/2022"),
complete: true,
priority: "high",
project: "Gravity",
// ToDo: Set priority based on date while creating task
},
{
text: "Finish Pierian UI/UX",
deadline: new Date("05/10/2022"),
complete: false,
priority: "med",
},
{
text: "Finish Internship",
deadline: new Date("05/05/2022"),
complete: false,
priority: "low",
},
{
text: "Anaadyanta",
deadline: new Date("05/12/2022"),
complete: false,
priority: "med",
},
{
text: "Random task",
deadline: new Date("05/19/2022"),
complete: false,
priority: "high",
},
]);
I want to remove elements whose complete is true. I am unable to think of the correct syntax while using setTasks. Please help.
You should filter tasks and set new state:
const updatedTasks = tasks.filter((el)=> el.complete !== 'true');
setTasks(updatedTasks);
you should pass callback inside setTasks:
setTask((prevTasks) => prevTasks.filter(({ complete }) => !complete));
The prevTasks always going to be the latest state, React insures it. You should always use callback when next state relies on previous. Also the name of prev variable passed in callback could be whatever you choose, here I named it prevTasks.