I have my code where i list all items from database, and i put an icon next to every single item. When i click on that icon, i want item to be deleted. How can i do that?

That looks like this on the front part:

I just started learning React and every help is appriciated, i would like to have Axios.delete in my deleteButton() function that deletes an item by its name.

I'm using react materials

my code:

export default function ItemControl() {
  const [itemList, setItemList] = useState([]);
  useEffect(() => {
    getItems();
  }, []);

  const url = "http://localhost:2000/appItem";

  const getItems = () => {
    // Sending HTTP GET request
    Axios.get(url).then((response) => {
      const itemListItems = [];
      response.data.forEach((resItem) => {
        itemListItems.push(resItem.name);
      });
      setItemList(itemListItems);
    });
  };

  const Demo = styled("div")(() => ({
    backgroundColor: "#f2f2f2",
  }));


  const deleteButton = (itemName) => {
    console.log(itemName);
    let newList = itemList.filter((el) => el.itemName !== itemName);
    setItemList(newList);
  };
  return (
    <Box sx={{ flexGrow: 1, maxWidth: 752 }}>
      <Grid container spacing={2}>
        <Grid item xs={12} md={12}>
          <Typography sx={{ mt: 4, mb: 2 }} variant="h6" component="div">
            Items
          </Typography>
          <Demo>
            <List>
              {itemList.map((li, index) => (
                <ListItem
                  secondaryAction={
                    <IconButton
                      edge="end"
                      aria-label="delete"
                      onClick={deleteButton}
                      id="name"
                    >
                      <DeleteIcon />
                    </IconButton>
                  }
                  key={li.itemId}
                >
                  <ListItemAvatar>
                    <Avatar>
                      <FolderIcon />
                    </Avatar>
                  </ListItemAvatar>
                  <ListItemText primary={li} />
                </ListItem>
              ))}
            </List>
          </Demo>
        </Grid>
      </Grid>
    </Box>
  );
}

CodePudding user response：

In your deleteButton event you did not call axios.delete to delete your record. Please do something like below:

const deleteButton = (itemName) => {
    console.log(itemName);
    axios.delete('url/itemName').then(() => {
        let newList = itemList.filter((el) => el.itemName !== itemName);

        setItemList(newList);
    });
};

UPDATE

return (
    <Box sx={{ flexGrow: 1, maxWidth: 752 }}>
      <Grid container spacing={2}>
        <Grid item xs={12} md={12}>
          <Typography sx={{ mt: 4, mb: 2 }} variant="h6" component="div">
            Items
          </Typography>
          <Demo>
            <List>
              {itemList.map((li, index) => (
                <ListItem
                  secondaryAction={
                    <IconButton
                      edge="end"
                      aria-label="delete"
                      onClick={() => deleteButton(li)}
                      id="name"
                    >
                      <DeleteIcon />
                    </IconButton>
                  }
                  key={li.itemId}
                >
                  <ListItemAvatar>
                    <Avatar>
                      <FolderIcon />
                    </Avatar>
                  </ListItemAvatar>
                  <ListItemText primary={li} />
                </ListItem>
              ))}
            </List>
          </Demo>
        </Grid>
      </Grid>
    </Box>
  );

CodePudding user response：

In order to know what item you want to delete, you have to pass it to your function deleteButton:

  <ListItem
    secondaryAction={
      <IconButton
        edge="end"
        aria-label="delete"
        onClick={() => deleteButton(li.itemName)} // this is changed
        id="name"
      >
        <DeleteIcon />
      </IconButton>
    }
    key={li.itemId}
  >

CodePudding user response：

I followed @hellogoodnight advice and i did this:

<ListItem
    secondaryAction={
      <IconButton
        edge="end"
        aria-label="delete"
        onClick={() => deleteButton(li)} // this is everything i needed
        id="name"
      >
        <DeleteIcon />
      </IconButton>
    }
    key={li.itemId}
  >