The text won't cross out in Todo app in "React" - reactjs

Question

I'm beginner and I'm working on Todo app in "React". I made a class with text-decoration: line-through and I want to cross out text when click on check_btn. But I don't know why the text won't cross out.
const Task = ({ setTasks, tasks, id, title }) => {
const deleteHandler = () => {
setTasks(tasks.filter((el) => el.id !== id));
};
const completeHandler = () => {
setTasks(
tasks.filter((item) => {
if (item.id === tasks.id) {
return {
...item,
completed: !item.completed,
};
}
return item;
})
);
};
return (
<div>
<li>
<div className={`task_name ${tasks.completed ? "completed " : ""}`}>
{title}
</div>
<button className="delete_btn" onClick={deleteHandler}>
<FaTimesCircle className="delete_item" />
</button>
<button className="edit_btn">
<FaEdit className="edit_item" />
</button>
<button className="check_btn" onClick={completeHandler}>
<FaCheckCircle className="check_item" />
</button>
</li>
</div>
);
};

Answer 1

tasks.completed will always be undefined. tasks is the array of tasks, not an individual task inside that array.
What you want to do is check the value of task.completed for each task in the tasks array.

Answer 2

You should use map instead of filter in completeHandler
filter is to filter data conditionally
map is to map a current object to another object
In your case, you change completed attribute in existing tasks means mapping data instead of filtering data.
Another problem is you use condition if (item.id === tasks.id) wrongly. It should be if (item.id === id) which is comparing to the current task id.
const Task = ({ setTasks, tasks, id, title }) => {
//find the current task by task id
const currentTask = tasks.find(task => task.id === id)
//if cannot find any task by task id in the current tasks list
//return nothing
if(!currentTask) {
return null
}
const deleteHandler = () => {
setTasks(tasks.filter((el) => el.id !== id));
};
const completeHandler = () => {
setTasks(
//use `map` instead of `filter`
tasks.map((item) => {
//compare to the current task id instead of `tasks.id` (not existing)
if (item.id === id) {
return {
...item,
completed: !item.completed,
};
}
return item;
})
);
};
return (
<div>
<li>
<div className={`task_name ${currentTask.completed ? "completed " : ""}`}>
{title}
</div>
<button className="delete_btn" onClick={deleteHandler}>
<FaTimesCircle className="delete_item" />
</button>
<button className="edit_btn">
<FaEdit className="edit_item" />
</button>
<button className="check_btn" onClick={completeHandler}>
<FaCheckCircle className="check_item" />
</button>
</li>
</div>
);
};