Removing a specific element in an array with React

Question

I have this code

I have some sections and inside it I have an item, number and button. How can I remove some specific item?

I'm rendering the sections as:

{sections.map((section, index) => (
        <Section
          section={section}
          key={section.id}
          addItem={(item) => addItem(index, item)}
          removeItem={(i) => removeItem(index, i)}
        />
      ))}

And in my Section component, I'm rendering it as:

{section.items.map((item, i) => (
        <>
          <h2>{item}</h2>
          <h3>{section.number[i]}</h3>
          <button onClick={() => removeItem(i)}>Remove</button>
        </>
      ))}

The remove function is in the Section's parent component and is:

const removeItem = (index, i) => {
    let filteredItem = sections[index].items.splice(i);
    let filteredNumber = sections[index].number.splice(i);

    setSections((prev) => ({ ...prev, filteredItem, filteredNumber }));
  };

When I click the remove button it says that sections.map is not a function. What am I doing wrong?

How did you define your section variable? Could it be that its empty or not an array before or after state change? What happens when you do optional chaining? — Obsidianlab
– Obsidianlab, Commented Apr 20, 2022 at 12:44
setSections((prev) => ({ ...prev, filteredItem, filteredNumber })); this makes your sections variable an object, its no longer an array even if it was previously an array, and object does not have map() function like an array, may be try [ ... ] instead of { ... } ? — Kritish Bhattarai
– Kritish Bhattarai, Commented Apr 20, 2022 at 13:01
share code sandbox code link instead of just the output link — Kritish Bhattarai
– Kritish Bhattarai, Commented Apr 20, 2022 at 13:03
First time sharing the code, so my bad hahahaha. I'll edit it — José Carlos
– José Carlos, Commented Apr 20, 2022 at 15:41

GʀᴜᴍᴘʏCᴀᴛ · Accepted Answer · 2022-04-20 12:50:37Z

1

At glance looks like you have an error in your Section component. The code:

{section.items.map((item, i) => (
    <>
        <h2>{item}</h2>
        <h3>{section.number[i]}</h3>
        <button onClick={() => removeItem(i)}>Remove</button>
    </>
))}

should be:

{section.items.map((item, i) => (
    <>
        <h2>{item.title}</h2>
        <h3>{item.number[i]}</h3>
        <button onClick={() => removeItem(i)}>Remove</button>
    </>
))}

Because you're passing down item and you're trying to render everything in the item object and section.number should be item.number.

answered Apr 20, 2022 at 12:50

GʀᴜᴍᴘʏCᴀᴛ

9,08620 gold badges91 silver badges165 bronze badges

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

1 Comment

José Carlos Over a year ago

Hey could you check the stackblitz code i posted up there?

Obsidianlab · Accepted Answer · 2022-04-20 23:10:48Z

1

I see your problem. In the code below when removing an element you are setting the sections to a single object not an array anymore. so map() doesn't exist on an Object. You have to convert it back into an Array.

const removeItem = (index, i) => {
let filteredItem = sections[index].items.splice(i);
let filteredNumber = sections[index].number.splice(i);
setSections((prev) => ({ ...prev, filteredItem, filteredNumber }));
};

Edit:

Upon further inspection of your code I see more errors.

In the remove item section in Section.js i see your trying to

const itemTarget = section.items[i];

That seems to be cause you are acting as is section is one object. but its an array that already has one section so you have to call it as follows for it to grab the items from the first (default) section.

const itemTarget = section[0].items[i];

This is the same with the filtered variable you will have to make sure when removing the item you are removing it from the correct section aswell.

edited Apr 20, 2022 at 23:10

answered Apr 20, 2022 at 12:57

Obsidianlab

6971 gold badge6 silver badges24 bronze badges

3 Comments

José Carlos Over a year ago

I tried something like that, could you check the stackblitz code?

Obsidianlab Over a year ago

I checked. Check my update, this is where you have to start looking

José Carlos Over a year ago

Thanks for checking it! But the section on my Section component is the iterated object itself, that's why i thought it would be section.items. I tried this

const itemTarget = section[0].items[i];     const filtered = section[0].items.filter((item) => item !== itemTarget);     setSections((prev) => [...prev, { ...prev, items: filtered }]);

And it says that cannot read properties of undefined (reading 'items') And i also tried instead of section, 'sections', that is the array defined on the parent component. When i tried with 'sections', it says that cannot read '0'

Collectives™ on Stack Overflow

Removing a specific element in an array with React

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related