CODEWITHSUNDEEP
javascriptreactjsreact-functional-component
Adbul
Adbul

Reputation: 43

Delete function in React js Functional Component

Im using functional components in react js. This is my delete function and I want to delete data by its corresponding id.

list data

function table() {
    
       ..........

    //Delete data
    const removeData = (id) => {
        if (window.confirm("Are you sure?")) {

            fetch('http://127.0.0.1:8000/api/' + id,
                {
                    method: 'DELETE',
                    headers: {
                        'Accept': 'application/json',
                        'content-Type': 'application/json'
                    }
                })

                .then(console.log("Deleted"))
                .catch(err => console.log(err));
        }
    };

I want to click the "Delete icon" first in my table with window confirmation before delete the Data. But the problem is when I refresh the project in localhost delete function automatically run and delete all data without clicking the delete icon. How to fixed this error?

return (
..............
<Table className={classes.table} aria-label="simple table"  >
  <THead color="primary">
    <Trow>
       <TableCell align="right">Item Number</TableCell>
       <TableCell align="right">Description</TableCell>
        <TableCell align="right">Unit</TableCell>
        <TableCell align="right">Quantity</TableCell>
        <TableCell align="right">Cost</TableCell>
        <TableCell align="right">Supplier</TableCell>
        <TableCell align="right">Action</TableCell>
    </Trow>
</THead>
   <TableBody>
    {
       (data.length > 0)
        ?
        data && data.map((lData, id) => {
        return (
        <Fragment key={id}>
           <Trow>
                <TableCell component="th" scope="row">{lData.item_no}</TableCell>
                <TableCell align="right">{lData.description}</TableCell>
                <TableCell align="right">{lData.unit}</TableCell>
                <TableCell align="right">{lData.quantity}</TableCell>
                <TableCell align="right">{lData.cost}</TableCell>
                <TableCell align="right">{lData.supplier}</TableCell>
                <TableCell align="right">
                <IconButton color="inherit" aria-label="Edit">
                   <EditIcon />
                </IconButton>
                <IconButton color="inherit" aria-label="Delete" onClick={removeData(lData.id)}>
                    <DeleteIcon />
                </IconButton>

         </TableCell>
        </Trow>
        </Fragment>
........
);
}
export default table;

Upvotes: 1

Views: 4656

Answers (2)

Samim Hakimi
Samim Hakimi

Reputation: 725

Change the following line:

 <IconButton color="inherit" aria-label="Delete" onClick={removeData(lData.id)}>
       <DeleteIcon />
 </IconButton>

To the following lines of code:

  <IconButton color="inherit" aria-label="Delete" onClick={() => removeData(lData.id)}>
        <DeleteIcon />
  </IconButton>

Upvotes: 0

Haider Ali Anjum
Haider Ali Anjum

Reputation: 847

You are doing the wrong here, in the following lines:

            <IconButton color="inherit" aria-label="Delete" onClick={removeData(lData.id)}>
                <DeleteIcon />
            </IconButton>

you are not passing a callback to the delete handler, you are directly calling it. you have to pass it like

onClick={() => removeData(lData.id)}

Which will make the above code as following:

            <IconButton color="inherit" aria-label="Delete" onClick={() => removeData(lData.id)}>
                <DeleteIcon />
            </IconButton>

Upvotes: 2

Related Questions