Removing a specific element in an array with React - reactjs

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?

Answer 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.

Answer 2

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.