• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

159
Vistas
How to pass a filtered array while keeping the original unchanged (ReactJS)

I am currently working on a todo list app, and i am trying to implement a function where users can filter tasks based on their completion status (all, completed, or uncompleted). I am trying to use the javascript filter function.'

I have tried using a duplicate array, therefore retaining the original values, and manipulating the duplicate array. However, I could not get the original array to update as the list increases, so i decided to scrap that.

There is a lot of code in my project but i will only copy the ones relevant to the question.

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;

so the question is, how do i implement this feauture in ReactJS?

for reference, i am linking a fellow coder's take on the same project : https://nasratt.github.io/frontendMentorSolutions/projects/todoList/

thanks in advance for the help.

almost 3 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda