reactMenuExample.js

import { useState } from "react";
import { Menu, MenuItem, ListItemIcon } from "@material-ui/core";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import IconButton from "@material-ui/core/IconButton";
import MoreVertIcon from "@material-ui/icons/MoreVert";
import EditIcon from "@material-ui/icons/Edit";
import DeleteForeverIcon from "@material-ui/icons/DeleteForever";

const CustomMenu = ({ anchorEl, close, item }) => {
  return (
    <Menu
      anchorEl={anchorEl}
      keepMounted
      open={Boolean(anchorEl)}
      onClose={close}
    >
      <MenuItem
        onClick={() => {
          console.log("Editing... " + JSON.stringify(item));
          close();
        }}
      >
        <ListItemIcon>
          <EditIcon fontSize={"small"} />
        </ListItemIcon>
        Edit
      </MenuItem>
      <MenuItem
        onClick={() => {
          console.log("Deleting... " + JSON.stringify(item));
          close();
        }}
      >
        <ListItemIcon>
          <DeleteForeverIcon fontSize={"small"} />
        </ListItemIcon>
        Delete
      </MenuItem>
    </Menu>
  );
};

const RenderList = () => {
  const [anchorEl, setAnchorEl] = useState(null);
  const [data] = useState([{ name: "Hello" }, { name: "Goodbye" }]);
  const [currentItem, setCurrentItem] = useState(null);

  function handleClick(event, item) {
    setAnchorEl(event.currentTarget);
    setCurrentItem(item);
  }

  function handleClose() {
    setAnchorEl(null);
  }

  var myArray = [];

  data.forEach((item, i) => {
    myArray.push(
      <ListItem button key={i}>
        <ListItemText primary={item.name} />
        <ListItemSecondaryAction>
          <IconButton onClick={(event) => handleClick(event, item)}>
            <MoreVertIcon />
          </IconButton>
          <CustomMenu
            anchorEl={anchorEl}
            close={handleClose}
            item={currentItem}
          />
        </ListItemSecondaryAction>
      </ListItem>
    );
  });

  return <List>{myArray}</List>;
};

export default function App() {
  return (
    <div className="App">
      <RenderList />
    </div>
  );
}