CODEWITHSUNDEEP
javascriptreactjsantd
Freddy.
Freddy.

Reputation: 1745

Map() Menu Items. How scope selected menu item?

Unsure how to correctly target a menu item and change the style. Currently, It will change all icon styles as I am using map() so this affects all menu items. Is it possible for me to target solely the selected item?

const SIDEBAR = [
  {
    key: "home",
    name: "Home",
    icon: "home"
  },
  {
    key: "User",
    name: "User",
    icon: "copy"
  },
  {
    key: "Copy",
    name: "Copy",
    icon: "copy"
  }
];

export default function App() {
  const { Sider } = Layout;

  const [filled, setFilled] = useState(false);
  const handleIt = e => {
    setFilled(true);
    console.log(e.key);
  };
  return (
    <Sider breakpoint="xs">
      <Menu onClick={handleIt} mode="inline" defaultSelectedKeys={["home"]}>
        {SIDEBAR.map(menu => (
          <Menu.Item item={menu.name} key={menu.key}>
            <Icon theme={filled && "filled"} type={menu.icon} />
            <span>{menu.name}</span>
          </Menu.Item>
        ))}
      </Menu>
    </Sider>
  );
}

Edit flamboyant-ride-06q6w

Upvotes: 1

Views: 1336

Answers (2)

Bill Metcalf
Bill Metcalf

Reputation: 670

You probably will want to hold an array in your state instead of what you have, something like

const App = () => {
  const [selected, setSelected] = useState([]);

  return (
    <Menu>
      {SIDEBAR.map((item) => (
        <Menu.item 
          onCLick={() => {
            if (selected.includes(item.key))
              setSelected(selected.filter(i => i !== item.key))
            else
              setSelected([...selected, item.key])
          }
        />
          <Icon theme={selected.includes(item.key) && "filled"} type={menu.icon} />
          <span>{menu.name}</span>
        </Menu.item>
      });
    </Menu>

  )
}

Upvotes: 1

Jean-Baptiste
Jean-Baptiste

Reputation: 1562

If you want to keep using a map, I would add a state to know which element has been selected. It should be something around what is written below.

    export default function App() {
      const { Sider } = Layout;

      const [selectedMenuElt, setSelectedMenuElt] = useState();

      const handleIt = e => {
        setSelectedMenuElt(e.key);
      };
      return (
        <Sider breakpoint="xs">
          <Menu onClick={handleIt} mode="inline" defaultSelectedKeys={["home"]}>
            {SIDEBAR.map(menu => (
              <Menu.Item item={menu.name} key={menu.key}>
                <Icon theme={menu.key === selectedMenuElt && "filled"} type={menu.icon} />
                <span>{menu.name}</span>
              </Menu.Item>
            ))}
          </Menu>
        </Sider>  );}

Upvotes: 0

Related Questions