onClick function does not remove item in an array

Question

I have a button which when you click should remove a box from the list but it doesn't work. Can anyone see why?

const Box = (props) => {
    return (
        <>
            <div id={props.id} style={{height:`${props.height}em`, width:`${props.width}em`, backgroundColor: props.color }}>
             </div>
           <Button onClick={props.removeItem}/>
        </>

    );
};
export default Box;

const BoxList = () => {

const [boxes, setBoxes] = useState([{height: "", width:"", color:"", id:""}]);

const removeBox = (boxId) => {
   const updatedBoxList = boxes.filter(box => box.id !== boxId);
    setBoxes(updatedBoxList);  // this is where the update should happen
};

const boxesArray = boxes.map((box) => {
    return(
    <Box width={box.height}
         height={box.width}
         color={box.color}
         id={box.id}
         removeItem={removeBox}
    />
    )
});
[...]

your removeBox function takes an argument, boxId, but <Button onClick={props.removeItem}/> doesn't call it with a box id — TKoL
– TKoL, Commented Oct 9, 2020 at 15:28

TKoL · Accepted Answer · 2020-10-09 15:30:14Z

4

const Box = (props) => {
    const removeItem = () => {
        props.removeItem(props.id);
    };
    return (
        <>
            <div id={props.id} style={{height:`${props.height}em`, width:`${props.width}em`, backgroundColor: props.color }}>
             </div>
           <Button onClick={removeItem}/>
        </>

    );
};
export default Box;

I've redefined your Box component so that it calls the props.removeItem function with the argument the function is expecting

answered Oct 9, 2020 at 15:30

TKoL

13.9k4 gold badges49 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Angela Inniss Over a year ago

Thank you, so i have to define the function in the same file and the and then pass the props with the argument the function is expecting up from inside there. OK understood.

TKoL Over a year ago

There is an alternative -- inside your boxes.map function, you could do something like this instead: removeItem={() => {removeBox(box.id)}}, and keep your Box component as it was

Angela Inniss Over a year ago

oh ok so i can just pass the function in directly with the argument, that is good to know. I will remember this for next time!

Wex · Accepted Answer · 2020-10-09 15:30:43Z

1

You need to pass the boxId into removeItem. Right now it is being called with the click event as its argument.

answered Oct 9, 2020 at 15:30

Wex

15.7k10 gold badges68 silver badges108 bronze badges

Collectives™ on Stack Overflow

onClick function does not remove item in an array

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related