React delete an item from an array of objects

Question

I'm fetching some data from a JSON file. I'm using the map method to display it and it's stored in a state. I need to be able to delete an item when the delete button is clicked. I'm using the filter method to filter out that specific item but I get this error: Uncaught TypeError: Cannot read properties of undefined (reading 'filter')

export default function Customers() {

const { appData, setAppData } = useContext(AppContext);
const { customers, packages } = appData;


function handleDeleteCustomer(id) {
    
    console.log(id)
    setAppData(setAppData.customers.filter(customer => customer.id !== id), appData.packages)
}

return (
    <TableContainer component={Paper}>
        <Table sx={{ minWidth: 650 }} aria-label="simple table">
            <TableHead>
                <TableRow>

                    <TableCell >id</TableCell>
                    <TableCell >Name</TableCell>
                    <TableCell />
                    <TableCell />

                </TableRow>
            </TableHead>
            <TableBody>
                {appData.customers.map((row) => {
                    return (
                        <TableRow sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
                            <TableCell component="th" scope="row">{row.id}</TableCell>
                            <TableCell >{row.name}</TableCell>
                            <TableCell ><Button variant="contained">Create Invoice</Button></TableCell>
                            <TableCell ><Button variant="contained" onClick={() => handleDeleteCustomer(row.id)}>Delete</Button></TableCell>
                        </TableRow>
                    )
                })}
            </TableBody>
        </Table>
    </TableContainer>
)

}

Ismail_Aj · Accepted Answer · 2022-02-07 22:18:10Z

1

There is a bug in your code:

setAppData(appData.customers.filter(customer => customer.id !== id), appData.packages)

not

setAppData(setAppData.customers.filter(customer => customer.id !== id), appData.packages)

answered Feb 7, 2022 at 22:18

Ismail_Aj

5623 gold badges5 silver badges23 bronze badges

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

4 Comments

user14456967 Over a year ago

Thanks. Fixed it but still got an error: Uncaught TypeError: Cannot read properties of undefined (reading 'map')

Ismail_Aj Over a year ago

I think you should check if customers is defined before doing ``` appData.customers.map(...)``` you can do it by simply adding this: ``` !appData.customers ? "no customers" : appData.cutomers.map(...) ```

user14456967 Over a year ago

It's defined as long as I don't click the button. The list of customers is rendered. When I click the delete button, then for some reason 'appData.customers' is not defined anymore.

Ismail_Aj Over a year ago

I believe the error is coming from setAppData function.

Collectives™ on Stack Overflow

React delete an item from an array of objects

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related