CODEWITHSUNDEEP
reactjsmaterial-ui
Benjamin
Benjamin

Reputation: 37

Material UI Rotate Menu Icons Individually

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.

Upvotes: 1

Views: 1159

Answers (1)

Vo Quoc Thang
Vo Quoc Thang

Reputation: 1396

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

Upvotes: 1

Related Questions