React, delete component with a button inside that component

Question

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!

Pass a deletion function down as prop. Then call it from inside the Weight component, passing its own index/key. — user5734311
– user5734311, Commented Dec 27, 2021 at 10:06

Gabriele Petrioli · Accepted Answer · 2021-12-27 09:31:50Z

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} />)
    );
  }

Eslam Abu Hugair · Accepted Answer · 2021-12-27 09:34:44Z

0

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

answered Dec 27, 2021 at 9:34

Eslam Abu Hugair

1,2101 gold badge12 silver badges24 bronze badges

Comments

MediumSpringGreen · Accepted Answer · 2021-12-27 09:41:41Z

0

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.

answered Dec 27, 2021 at 9:41

MediumSpringGreen

5444 silver badges8 bronze badges

Collectives™ on Stack Overflow

React, delete component with a button inside that component

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related