0
190
Vistaseliminando un elemento en una matriz dentro del mapa en reaccionar
Al hacer clic en el lapso, quiero eliminar ese elemento de la matriz y ejecutar el mapa nuevamente para que los lapsos también se eliminen. No sé si la sintaxis es incorrecta o qué. Este es el enlace al sandbox donde escribí mi código. https://codesandbox.io/s/angry-wu-4dd11?file=/src/App.js
import "./styles.css"; export default function App() { const data = [{ name: "Alex", }, { name: "John", }, { name: "Leo", }, { name: "Murphy", }, { name: "Alex", }, { name: "John", }, { name: "Leo", }, { name: "Murphy", }, ]; return ( < div className = "App" > { data.map(function(val, id) { return ( < span key = { id } className = "select__item" onClick = { (e) => { data.splice(data.indexOf(val), id + 1); console.log(data); } } > { val.name } < br / > < br / > < /span> ); }) } < /div> ); }
·
Santiago Trujillo
2 Respuestas
Responde la pregunta0
Debería usar useState hook en este caso, porque React no se volverá a renderizar automáticamente. Tienes que decirle a reaccionar externamente, una forma es cambiar el estado y reaccionar volverá a representar los componentes automáticamente como:
Demo en vivo
import { useState } from "react"; import "./styles.css"; export default function App() { const [data, setData] = useState([ { name: "Alex", }, { name: "John", }, { name: "Leo", }, { name: "Murphy", }, { name: "Alex", }, { name: "John", }, { name: "Leo", }, { name: "Murphy", }, ]); const removeItem = (index) => { setData(data.filter((o, i) => index !== i)); }; return ( <div className="App"> {data.map(function (val, id) { return ( <span key={id} className="select__item" onClick={() => removeItem(id)}> {val.name} <br /> <br /> </span> ); })} </div> ); }
·
Santiago Trujillo
Denunciar
0
function handleRemove(id) { // this work for me const newList = this.state.newList.filter((item) => item.id !== id); this.setState({newList}); }
·
Santiago Trujillo
Denunciar
Responde la pregunta