How can I change boolean property on array object depending on which element was clicked

Question

const [task, setTask] = useState([{name: 'name1', isChecked: false}, {name: 'name2', isChecked: false}])

I tried this way but it changes on every object:

const handleCheck = (toggle) => {
  setTask(prevState => prevState.map(item => ({
     ...item,
     isChecked: toggle,
  })));

}

Answer 1

Just, pass index of the element that you clicked and then toggle the isChecked property using the index.

function App(){
    const [task, setTask] = useState([{name: 'name1', isChecked: false}, {name: 'name2', isChecked: false}])
    
   const handleCheck = (index) => {
      let new_array = task;
      new_array[index].isChecked = !new_array[index].isChecked;
      setTask(new_array);
   }

   return (
        <>
           {
              task.map((__task,index) => 
                 <div key={index} 
                   onClick={() => handleClick(index)} 
                 >
                 {__task.name}
                 </div>
           }
        </>
     )
}