Tengo una tarea que necesita que cree un botón que elimine ciertos elementos en una matriz. He pasado una matriz como accesorio al componente secundario (). Ahora, en el componente secundario, cada vez que hago clic en el botón Eliminar, parece que no funciona y me cuesta encontrar el problema.
Aquí está el enlace al código: (App.js)
function App() { const [input, setInput] = useState(""); const [list, setList] = useState([]); const handleSubmit = (e) => { e.preventDefault(); setList([...list, {val: input, key: Math.floor(Math.random() * 11)}]); } const handleChange = (e) => { setInput(e.target.value) } return( <div className='App'> <header className='App-header'> <div className='Wrapper'> <div className='input-container'> <input type="text" onChange={handleChange} value={input} /> <input type="submit" onClick={handleSubmit} /> </div> <List list={list}/> </div> </header> </div> ) } export default App;Y el enlace al componente "" que:
function List(props) { //handle delete. we return elements on a condition that the keys do not match const handleDelete = (key)=>{ props.list.filter((items)=>{ return items.key != key }) } return ( <> { props.list.map(function(listItem){ return ( <div className='lists' key={listItem.key}> <p>{listItem.val} <button onClick={handleDelete(listItem.key)}>Delete</button> </p> </div> ) }) } </> ) } export default ListDebe pasar setList al componente List
<List list={list} setList={setList}/>Lista
const handleDelete = (key)=>{ const newList = props.list.filter((items)=>{ return items.key != key }) props.setList(newList) }La función de filter devuelve una nueva matriz, no modifica la matriz existente que tiene. Por lo tanto, debe asignar la lista recién filtrada utilizando la función setList . Puede pasar la función setList como accesorio a su componente secundario para llamarlo después del filtrado, o proporcionar a su componente secundario una función de devolución de llamada handleDelete que definiría en el componente principal (que filtrará y configurará en el principal) a través de un accesorio, y luego simplemente lo llama en el componente secundario al hacer clic.