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: [![enter image description here](https://i.stack.imgur.com/5KrkA.png)](https://i.stack.imgur.com/5KrkA.png)

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>
  );
}

```