React：如何在不改变状态的情况下根据属性过滤状态？

Question

I have two button, one is completedTasks and another is incompleteTasks so when user click on completedTasks I want to filter the state array based on a property. and vice versa.

but, the problem is after clicking on completedTasks my state array is mutated to only completedTasks filtered values. so that, when I clicked on incompltedTasks I don't get my state back

here is my two method:

 const incompleteTasks = () => {
    const tasks = todos.filter((todo) => todo.completed === false);
    setTodos(tasks);
  };

  const completedTasks = () => {
    const tasks = todos.filter((todo) => todo.completed === true);
    setTodos(tasks);
  };

How to fix this so that the actual array is not modified, and just show the filtered property based on button click instead.

Answer 1

- First solution could be using a state for storing status of filter

const [completed,setCompleted] = useState(null);  //true , false

 const incompleteTasks = () => setCompleted(false);             

 const completedTasks = () =>    setCompleted(true);

and use filteredTodos where you want to show

const filteredTodos = completed !==null ? todos.filter((todo) => todo.completed === completed):todos;
  

- Second soultion could be using a temp state:

const [filteredTodos,setFilteredTodos] = useState([]);

 const incompleteTasks = () => {
    const tasks = todos.filter((todo) => todo.completed === false);
    setFilteredTodos(tasks);
  };

  const completedTasks = () => {
    const tasks = todos.filter((todo) => todo.completed === true);
    setFilteredTodos(tasks);
  };

then show filteredTodos where you want.