Así que estoy haciendo una lista en la que puedes agregar elementos. Cuando los agregas tienes dos opciones:
Pero por alguna razón, el botón "handeDelete" no funciona. ¿Alguien puede decirme qué escribí mal en el código?
El enlace a CodeSandbox es:
import { useState } from "react"; import uuid from "react-uuid"; export default function ItemList() { const [items, setItems] = useState({ item: "" }); const [groceryList, setGroceryList] = useState([]); function handleChange(value, type) { setItems((prev) => { return { ...prev, [type]: value }; }); } function handleSubmit(e) { e.preventDefault(); const newItem = { ...items, id: uuid() }; setGroceryList([...groceryList, newItem]); setItems({ item: "" }); } function handleDelete(id) { setGroceryList(groceryList.filter((items) => items.id !== id)); } return ( <> <form autoComplete="off" onSubmit={handleSubmit}> <input type="text" name="item" id="item" value={items.item} onChange={(e) => handleChange(e.target.value, "item")} /> </form> {groceryList.map((list) => { return ( <div key={list.id}> <ul> <li> {list.item}</li> </ul> <button onClick={(id) => handleDelete()}>Delete</button> </div> ); })} <button onClick={() => setGroceryList([])}>Clear</button> </> ); }La definición de su botón Eliminar es incorrecta:
<button onClick={() => handleDelete(list.id)}>Delete</button>el parámetro que está recibiendo del evento de clic no es la identificación. Como no está trabajando con los argumentos del evento, puede ignorarlo con seguridad. El segundo error fue que no está pasando la identificación en sí a su función handleDelete.
Con fines de aprendizaje, siéntase cómodo e imprima el evento en la consola, mientras desarrolla:
<button onClick={(evt) => { console.log(evt) handleDelete(list.id) }}> Delete </button> Esto le mostrará que el parámetro, que nombró id (y lo cambié de nombre a evt ), de hecho reacciona Evento sintético: https://reactjs.org/docs/events.html