¿Qué debo hacer para eliminar un elemento de mi lista de tareas pendientes? ¿Qué hice mal?
Aquí está mi código
function App1() { const myInputValue = useRef(); const [todo, setToDo] = useState([]); const addItem = (event) => { event.preventDefault(); const id = uuid(); setToDo([ ...todo, { id: id, name: myInputValue.current.value, }, ]); myInputValue.current.value = ""; }; const removeItem = e => { const data = todo.filter(el => el.e !== e); setToDo(data); }; const listItems = todo.map((element) => ( <li key={element.id}> {element.name} <button>Done</button> <button onClick={() => removeItem(element.id)}>Delete</button> </li> )); return ( <div> <input ref={myInputValue}></input> <button onClick={addItem}>Add</button> <ul> {listItems} </ul> </div> ); } export default App1;¿Qué debo cambiar en mi función removeItem? ¿Dónde cometo un error? Por favor ayuda
No estoy seguro, pero cuando agrega un elemento, agrega un objeto con las siguientes claves (id y nombre), entonces, ¿por qué cuando llama a removeItem, prueba con elemnt.e? no quisiste escribir esto? :
todo.filter(el => el.id !== e)en lugar de esto:
todo.filter(el => el.e !== e)Está pasando el nombre del elemento en lugar del elemento en sí.
<button onClick={() => removeItem(element.name)}>Delete</button>Tal vez sería mejor si comparara la identificación de todo en su función de filtro. Intente cambiar su función removeItem para que sea así.
const removeItem = e => { const data = todo.filter(el => el.id !== e.id); setToDo(data); };Prueba esto
const removeItem = e => { //e is your id so you compare with other obj ids const data = todo.filter(el => el.id !== e); setToDo(data);};