Estoy tratando de eliminar un elemento por identificación, pero sigo recibiendo un error, que cada niño debe tener una clave única después de darle una identificación, ¿qué estoy haciendo mal? ¿Por qué no obtengo la identificación?
const TodoList = () => { const [input, setInput] = useState(""); const [todos, setTodos] = useState([]) const handleSubmit = e => { e.preventDefault() setTodos([...todos, input]) setInput("") } const handleDelete = id => { let item = todos.filter(todo => todo.id !== id) console.log(item) // setTodos(item) } return ( <div className='todolist'> <h2>Todo List</h2> <form> <input value={input} onChange={e => setInput(e.target.value)} placeholder='write something' /> <button onClick={handleSubmit}>Add todo</button> </form> {todos.map(todo => ( <div key={todo.id} className='todolist__details'> <h2>{todo}</h2> <DeleteIcon onClick={() => handleDelete(todo.id)} /> </div> ))} </div> ); }; export default TodoList; {todos.map((todo, i) => { <div key={i} className='todolist__details'> <h2>{todo}</h2> <DeleteIcon onClick={() => handleDelete(i)} /> </div> })}Puede verificar cómo funcionan la lista y las teclas en reaccionar aquí
Del código anterior, parece que todos es una matriz de cadenas. Entonces, cuando asigna la key haciendo todo.id , está asignando la key para que no esté undefined ya que la propiedad id no existe en el tipo de string . Cambia tu método de mapa así
{todos.map((todo, i) => ( <div key={i} className='todolist__details'> <h2>{todo}</h2> <DeleteIcon onClick={() => handleDelete(i)} /> </div> ))} y luego cambia en tu handleDelete like
const handleDelete = id => { const newTodos = [...todos]; newTodos.splice(id, 1); console.log(newTodos) setTodos(newTodos) }