I have a dynamically rendered component, with its own key, stored in an array of objects. This component has a delete button, that ideally would delete the element from its key from the array. However I can't wrap my head around it. Should the delete function be in the container or in the component? I tried different things but nothing seems to work. Right now I have:
Array of objects in the container:
const [weight, setWeight] = useState([{name: 34, value: "321iuiv51234"},{name: 38, value: "jkxdxb55s"}]);
And the dynamically rendered component, where the trash bin img should trigger a function to delete the component.
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;
Any ideas? Thank you!
The delete functionality should be part of where the container, but the triggering event should come from the Weight.
Something like
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;
and
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} />)
);
}
The delete function can either be in the component or in the container(there are some performance subtleties when using event bubbling). Usually it's in the component. So in the component when the click is triggered you either have to call a callback function which is given to the component as a prop(to return the id or something for the container to identify the component that triggered the action) or use a single state library like redux to update the new state within the component without any callback inconvenience.
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