Material UI Rotate Menu Icons Individually - reactjs

Question

When I click on one button in a navigation bar, I want to only flip one icon instead of all of the icons in the navigation bar. Right now when I click on one button, all of the icons flip instead of just the one I clicked.
Here is a demo: https://codesandbox.io/s/festive-frost-53nny
Any help is greatly appreciated.

Answer 1

You are using one open state for all items. Create an array of open items like your anchor Array.
import "./styles.css";
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import clsx from "clsx";
import Button from "#material-ui/core/Button";
import { KeyboardArrowUp } from "#material-ui/icons";
import AppBar from "#material-ui/core/AppBar";
import Toolbar from "#material-ui/core/Toolbar";
import { menuItems } from "./menuItems";
const useStyles = makeStyles((theme) => ({
openX: {
transform: "scaleX(1)"
},
closeX: {
transform: "scaleX(-1)"
},
openY: {
transform: "scaleY(1)"
},
closeY: {
transform: "scaleY(-1)"
}
}));
export default function App() {
const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (index, event) => {
setAnchorEl({ [index]: event.currentTarget });
setOpen((prevState) => {
const newState = [...prevState];
newState[index] = !prevState[index];
return newState;
});
};
const [open, setOpen] = React.useState(
new Array(Object.keys(menuItems).length).fill(false)
);
return (
<AppBar>
<Toolbar>
<div>
{Object.keys(menuItems).map((item, index) => (
<div key={index}>
<React.Fragment>
<Button onClick={(e) => handleClick(index, e)}>
{item}
<KeyboardArrowUp
className={clsx(
!open[index] && classes.closeY,
open[index] && classes.openY
)}
/>
</Button>
</React.Fragment>
</div>
))}
</div>
</Toolbar>
</AppBar>
);
}