Puedo empujar valores pero no estoy seguro de dónde me equivoco con el filtrado. ¿Alguien puede guiarme si estoy usando mal el método de filtro o es otra cosa?
import { useState } from 'react'; const App = () => { const [task,setTask] = useState(''); const [list,setList] = useState([]); const submitHandler = (event) => { event.preventDefault(); const newTask = { id: new Date().getTime().toString(), title: task }; setList([...list, newTask]); setTask(''); } const clearList = () => { setList([]); } const removeItem = (id) => { const filteredList = list.filter(item => item.id !== id); setList(filteredList); } return <div> <h2>To do list!</h2> <form onSubmit={submitHandler}> Enter Task! <input type='text' onChange = {(event) => {setTask(event.target.value)}}> </input> </form> <div> {list.map((obj) => ( <h4 key={obj.id}>{obj.title}<button onClick={removeItem}>X</button></h4>))} <button onClick={clearList}>Clear All</button> </div> </div> } export default AppEn este momento, está llamando a removeItem usando onClick={removeItem} , que pasará un objeto de evento a su función removeItem , y no una identificación como la que espera recibir su función. Querrá pasar a su método removeItem la identificación del objeto que desea eliminar cuando haga clic, lo que se puede hacer pasándole obj.id :
... <button onClick={() => removeItem(obj.id)}>X</button> ...