Why do I get TypeError: undefined is not an object (evaluating 'items.items.map') when removing a component? - reactjs

Question

I am trying to delete an item component from a list on my React app but I get a TypeError: undefined is not an object (evaluating 'items.items.map') error when the event is triggered. I can't see what is wrong with the code.
function _delete(id) {
return fetchWrapper.delete(`${baseUrl}/${id}`);
}
const [items, setItems] = useState(null);
useEffect(() => {
shoppingService.getAll().then((x) => setItems(x));
}, []);
function deleteItem(id) {
setItems(
items.items.map((x) => {
if (x.id === id) {
x.isDeleting = true;
}
return x;
})
);
shoppingService.delete(id).then(() => {
setItems((items) => items.items.filter((x) => x.id !== id));
});
}
{items &&
items.items.map((item) => (
<ListItem divider={true} key={item.id}>
...
</ListItem>
)
}
<IconButton
onClick={() => deleteItem(item.id)}
>
What could be causing it to go wrong? The item correctly gets removed from the collection on MongoDB.
Sandbox: View sandbox here

Answer 1

Thanks for the sandbox, it provides more context and makes this solvable.
It looks like you are attempting to export your functional component ShoppingList and this is the culprit:
export { ShoppingList };
That is leading to the error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
This is because when you use export { ShoppingList } you are exporting an object, not your functional component. Thus: type error. This can be verified with:
console.log({ShoppingList});
Returns:
Object {ShoppingList: function ShoppingList()}
To solve this, change your export command to:
export default ShoppingList;
This solves your original question, but other errors occur now. This is likely because shoppingService is not connected to the CodeSandbox. If you run into any further issues, I can lend a hand with another question.
I reread your question and took some liberties with removing shoppingService to idenitfy what is going on with your remove function. I believe what is happening is you are trying to edit an immutable variable items. Instead, spread the items into a new array and then filter-out the item with the matching id.
First clean-up your data frame to remove the duplicate items.items reference:
const myItems = [
{
id: "5f516ebbd8f4d11abe5919c8",
itemName: "Bacon"
},
{
id: "5f52e43e4dda46085f008aca",
itemName: "Eggs"
},
{
id: "5f57a3056a71a0143281c1a8",
itemName: "Oranges"
}
];
Here's what your function should look like:
function deleteItem(id) {
let newItems = [...items].filter((item) => item.id !== id);
setItems(newItems);
console.log(newItems);
}
CodeSandbox: https://codesandbox.io/s/stack-removing-items-m8thu?file=/src/App.js