'I'm getting item.map is not a function when I try to delete an item with filter

I'm having a difficult time knowing why when I try to delete an item, it gives me a items.map() is not a function. Before I added the delete functionality, it works well to add new item with the items.map() in the code. I have done a lot of debugging within the code, like passing id values to the onclick functions and defining a seperate function but they all still refer me to the items.map is not a function.

Considering that it is when I add filter() that I started to get the error, I think there is something about the way I wrote the filter that is making the items.map not to be a function. but I am not getting errors, complaining about that, rather I am getting for map() that I already used earlier.

Similar questions on stackoverflow that I found were talking about map() function working with an array, not an object. But in my case items is declared as an array of objects, not an object.

Please anyone familiar with what is wrong should please provide insight. 

import React, { useState } from 'react'
import {Container, ListGroup, ListGroupItem, Button} from 'reactstrap'
import {CSSTransition, TransitionGroup} from 'react-transition-group'
//import uuid from 'uuid/v4'
import {v4 as uuid} from 'uuid'


const ShoppingList = (props) => {
const [items, setItems] = useState([
    {id: uuid(), name: 'Eggs'},
    {id: uuid(), name: 'Apple'},
    {id: uuid(), name: 'Mangoes'},
])


return (
    <div>
    <Container>
        <Button color="dark" style={{marginBottom: "2rem"}} onClick={() => {
            const name=prompt('Enter Name');
            if (name) {
                setItems([...items, {id: uuid(), name}])
            }
         }}>Add Item </Button>

         <ListGroup>
             <TransitionGroup className="shopping-list">
             {items.map((item)=>(

                 <CSSTransition key={item.id} timeout={500} classNames="fade">
                     <ListGroupItem>
                        <Button
                            className="remove-btn"
                            color="danger"
                            size="sm"
                            onClick={()=> {
                                setItems(prevState => ({
                                items: items.filter(x => x.id !== item.id)
                            }))
                        }
                        }
                        >&times;
                        </Button>
                     {item.name}
                     </ListGroupItem>
                 </CSSTransition>

                 ))}
             </TransitionGroup>
         </ListGroup>
    </Container>
    </div>
)
}

 export default ShoppingList;
arraysreactjsfilterreactstrap


Solution 1:[1]

You should do the following:

setItems(prevState => prevState.filter(x => x.id !== item.id)

Solution 2:[2]

setItems(prevState => prevState.filter(x => x.id !== item.id)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 HMR
Solution 2 Jafir Anjum

Related Questions