Actualmente estoy trabajando en una aplicación de lista de tareas y estoy tratando de implementar una función en la que los usuarios puedan filtrar las tareas en función de su estado de finalización (todas, completadas o incompletas). Estoy tratando de usar la función de filtro de javascript.'

He intentado usar una matriz duplicada, por lo tanto, conservando los valores originales y manipulando la matriz duplicada. Sin embargo, no pude actualizar la matriz original a medida que aumenta la lista, así que decidí descartarla.

Hay mucho código en mi proyecto, pero solo copiaré los relevantes para la pregunta.

 const Body = () => { let tasks = [ { task: 'Walk the dog', completed: false, id: Math.round(Math.random() * 100000), }, { task: 'Learn ReactJS', completed: false, id: Math.round(Math.random() * 100000), }, ]; const [task, setTask] = useState(tasks); const addTask = () => { let input = document.getElementById('task-field'); let randomID = Math.round(Math.random() * 100000); if (input != null) { setTask([...task, { task: input.value, completed: false, id: randomID }]); } }; return ( <div className='body'> <Header></Header> <Input setMethod={set} inputMethod={addTask}></Input> <Tasks tasks={task} display={display} removeMethod={complete}></Tasks> </div> ); }; export default Body;

 const Tasks=({tasks, display, removeMethod,})=> { const [task,setTask] = useState(tasks) const [display,setDIsplay] = 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;

entonces la pregunta es, ¿cómo implemento esta característica en ReactJS?

como referencia, estoy vinculando la opinión de un compañero codificador sobre el mismo proyecto: https://nasratt.github.io/frontendMentorSolutions/projects/todoList/

gracias de antemano por la ayuda.