const [todo,setTodo] = useState([]);
const removeTodo = id => {
const removedArr = [...todo].filter(item => item.id !== id);
setTodo(removedArr);
};
<div className="todoList">
{todo.map((item, index) => (
<div className="todoTarget" key={index}>
<span className="todoSpan">{index 1} - {item}</span>{" "}
<div>
<FaTimesCircle onClick={() => removeTodo(item.id)}/>
</div>
</div>
))}
</div>
My code snippet is like this, when I click on the icon, all the items disappear, not the item in the icon I clicked. What is the reason. I would appreciate your help.
I tried to freeze it with the map function in the arrays and solve it with the id of each item, but they all disappear.
CodePudding user response：
Such things usually happens when you don't have a unique id for every object in the list.
Check if every item in your todo list has a unique id, in case not then add one. should work just fine.
check my example with your code here: