Menu list overlapping with another Menu list - reactjs

Question

I'm new to react.js and material UI, i'm try to make a Navigation top navbar for my project,
i use the 'MenuList' composition to my top navbar, the first one Button is success,but when i add another one and click it, it will overlapping with first menu list. Can someone give some hints? Thank you all.
here is the problem image
and here is my navbar source code
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Paper from '#material-ui/core/Paper';
import Tabs from '#material-ui/core/Tabs';
import Tab from '#material-ui/core/Tab';
import ClickAwayListener from '#material-ui/core/ClickAwayListener';
import Button from '#material-ui/core/Button';
import Grow from '#material-ui/core/Grow';
import Popper from '#material-ui/core/Popper';
import MenuItem from '#material-ui/core/MenuItem';
import MenuList from '#material-ui/core/MenuList';
import { Link, Route, withRouter } from 'react-router-dom';
const useStyles = makeStyles({
root: {
flexGrow: 1,
},
});
export default function CenteredTabs() {
const classes = useStyles();
const [value, setValue] = React.useState(0);
const [open, setOpen] = React.useState(false);
const anchorRef = React.useRef(null);
const handleChange = (event, newValue) => {
setValue(newValue);
};
const handleToggle = () => {
setOpen(prevOpen => !prevOpen);
};
const handleClose = event => {
if (anchorRef.current && anchorRef.current.contains(event.target)) {
return;
}
setOpen(false);
};
function handleListKeyDown(event) {
if (event.key === 'Tab') {
event.preventDefault();
setOpen(false);
}
}
// return focus to the button when we transitioned from !open -> open
const prevOpen = React.useRef(open);
React.useEffect(() => {
if (prevOpen.current === true && open === false) {
anchorRef.current.focus();
}
prevOpen.current = open;
}, [open]);
return (
<Paper className={classes.root}>
<Tabs
value={value}
onChange={handleChange}
indicatorColor="secondary"
textColor="primary"
>
<Tab label="WeniPay" to="/" component={Link} style={{ float: "left" }} />
<Tab label="Home" to="/" component={Link} />
<Tab label="Login" to="/works" component={Link} />
<Tab label="Pay" to="/payPage" component={Link} />
</Tabs>
<Button
ref={anchorRef}
aria-controls={open ? 'menu-list-grow' : undefined}
aria-haspopup="true"
onClick={handleToggle}
>
Toggle Menu Grow
</Button>
<Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
{({ TransitionProps, placement }) => (
<Grow
{...TransitionProps}
style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
>
<Paper>
<ClickAwayListener onClickAway={handleClose}>
<MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleClose}>Logout</MenuItem>
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
<Button
ref={anchorRef}
aria-controls={open ? 'menu-list-grow' : undefined}
aria-haspopup="true"
onClick={handleToggle}
>
s
</Button>
<Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
{({ TransitionProps, placement }) => (
<Grow
{...TransitionProps}
style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
>
<Paper>
<ClickAwayListener onClickAway={handleClose}>
<MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
<MenuItem onClick={handleClose}>1</MenuItem>
<MenuItem onClick={handleClose}>2</MenuItem>
<MenuItem onClick={handleClose}>3</MenuItem>
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
</Paper>
);
}
and here is main page
import React from 'react';
import styles from './App.module.scss';
import { Link, Route, withRouter } from 'react-router-dom';
import HomePage from './HomePage';
import WorkPage from './WorkPage';
import WorkPageDetail from './WorkPageDetail';
import Header from './header';
import PayPage from './PayPage';
class App extends React.Component {
render() {
const { location } = this.props;
return (
<div className={styles.App}>
{/* header */}
<header className={styles.header}>
<div className={styles.box}>
<Header />
</div>
</header>
{/* content */}
<section className={styles.content}>
<Route path="/" exact component={HomePage} />
<Route path="/works" exact component={WorkPage} />
<Route path="/works/:id" exact component={WorkPageDetail} />
<Route path="/payPage" exact component={PayPage} />
</section>
{/* footer */}
<footer className={styles.footer}>
<p>© <b>MyPay</b></p>
</footer>
</div>
);
}
}
export default withRouter(App);

Answer 1

You can make archorEl as array so you can set like
// set anchor as empty list so we can track it later
const [anchorEl, setAnchorEl] = React.useState<[] | HTMLElement[]>([]));
const openMenu = (event, index) => {
const tempAnchor = anchorEl;
tempAnchor[index] = event.currentTarget; // only set change version
setAnchorEl(tempAnchor);
};
const closeMenu = () => {
setAnchorEl([]); // now we set it to empty list
}
and our tsx would be like
<Menu
id={row.id}
anchorEl={anchorEl[index]}
keepMounted
open={Boolean(anchorEl[index])}
onClose={() => closeMenu()}
>
<MenuItem> Foo</MenuItem>
<MenuItem> Bar</MenuItem>
</Menu>