Tengo un componente renderizado dinámicamente, con su propia clave, almacenado en una matriz de objetos. Este componente tiene un botón de eliminación, que idealmente eliminaría el elemento de su clave de la matriz. Sin embargo, no puedo envolver mi cabeza alrededor de eso. ¿La función de eliminación debe estar en el contenedor o en el componente? Intenté cosas diferentes pero nada parece funcionar. Ahora mismo tengo:
Matriz de objetos en el contenedor:
const [weight, setWeight] = useState([{name: 34, value: "321iuiv51234"},{name: 38, value: "jkxdxb55s"}]);Y el componente representado dinámicamente, donde la papelera img debería activar una función para eliminar el componente.
import React from "react"; import "./Weight.css"; import trashbin from "../img/trash-bin.png"; const Weight = ({}) => { return ( <div className="weight-box"> <p>{weight} kg</p> <p></p> <img src={trashbin} alt="trash bin" className="trash-bin" /> </div> ); }; export default Weight;¿Algunas ideas? ¡Gracias!
La funcionalidad de eliminación debe ser parte del contenedor, pero el evento desencadenante debe provenir de Weight .
Algo como
import React from "react"; import "./Weight.css"; import trashbin from "../img/trash-bin.png"; const Weight = ({delete, name, value}) => { return ( <div className="weight-box"> <p>{name} kg</p> <p></p> <button onClick={() => delete(name)}><img src={trashbin} alt="trash bin" className="trash-bin" /></button> </div> ); }; export default Weight;y
function Container(props) { const [weight, setWeight] = useState([{ name: 34, value: "321iuiv51234" }, { name: 38, value: "jkxdxb55s" }]); const removeByName = useCalback((nameToDelete) => { setWeight(currentWeights => currentWeights.filter(({ name }) => name !== nameToDelete)); }, []); return ( weight.map(w => <Weight delete={removeByName} { ...w} />) ); }La función de eliminación puede estar en el componente o en el contenedor (hay algunas sutilezas de rendimiento cuando se usa el burbujeo de eventos). Por lo general, está en el componente. Entonces, en el componente, cuando se activa el clic, debe llamar a una función de devolución de llamada que se le da al componente como accesorio (para devolver la identificación o algo para que el contenedor identifique el componente que activó la acción) o usar un solo estado biblioteca como redux para actualizar el nuevo estado dentro del componente sin ningún inconveniente de devolución de llamada.
const Container = ()=>{ const [weights, setWeight] = useState([{name: 34, value: "321iuiv51234"},{name: 38, value: "jkxdxb55s"}]); const onDelete = (name)=> ()=> setWeights(weights.filter((w)=>w.name!==name)) return ( <div> {weights.map(w=> <Weight {...w} onDelete={onDelete(w.name)} />)} </div> ) // and on Weight component hook the onDelete callback to the trash icon