I am currently completing a challenge on Frontend Mentor, which is the Todo List challenge. However, I am having trouble with the task filtering function (showing only the completed tasks, only the uncompleted tasks, or showing all the tasks).
Here is my code
Tasks container
import { useState } from "react"
import iconCheck from '../images/icon-check.svg'
import TaskComponent from "./TaskComponent.jsx"
import Footer from "./Footer"
const Tasks=({tasks, display, removeMethod,})=> {
const [task,setTask] = useState(tasks)
const filterFunction=(event)=> {
let filtered;
const target = event.target;
switch(target.innerHTML) {
case('All'):
filtered = task
break;
case('Active'):
filtered = task.filter(()=> {
return !task.completed
})
break;
case('Completed'):
filtered = task.filter(()=> {
return task.completed
})
setDisplay(filtered)
}
}
return(
<div className="tasks">
{display.map(el=> {
return (
<TaskComponent task={el} removeMethod = {removeMethod} key = {el.id}></TaskComponent>
)
})}
<Footer method = {filterFunction} ></Footer>
</div>
)
}
export default Tasks;
Footer component (where the filter buttons are)
const Footer=({ method})=> {
return(
<div className="footer">
<h5> tasks left</h5>
<div className="selectors">
<h5 onClick={(event)=> {
method(event)
}}>All</h5>
<h5 onClick = {(event)=> {
method(event)
}}>Active</h5>
<h5 onClick={(event)=> {
method(event)
}}>Completed</h5>
</div>
<h5>Clear Completed</h5>
</div>
)
}
export default Footer;
Things i have tried:
- setting a duplicate array using useState (so that i can keep the original while filtering the duplicate), however it was a bit challenging for me to implement and it ended up not updating.
for more details, here is the challenge. Frontend Mentor | Todo app coding challenge
Sorry for the rather long post, I am quite stupid and have been stuck with this problem since yesterday
