Toggling specific maps with styled components

See more:

Javascript

ReactJS

Hi guys i am rendering out a drop down with specific map data using style comps. currently heres my code

const MenuBar = () => {
  const [toggle, setToggle] = useState(false);
  const handleToggle = () => {
    setToggle(!toggle);
  };
  return (
    <MenuContainer>
      {menu.children.map((outerMap, i) => (
        <Dropdown>
          <DropBtn key={i} onClick={handleToggle}>
            <h2>{outerMap.name}</h2>
          </DropBtn>
          <DropdownContent toggle={toggle}>
            {outerMap.name === "Account" &&
              outerMap.firstchild.map((innerMap, i) => (
                <li key={i}>{innerMap.name}</li>
              ))}
            {outerMap.name === "Design" &&
              outerMap.secondchild.map((innerMap, i) => (
                <li key={i}>{innerMap.name}</li>
              ))}
            {outerMap.name === "Content" &&
              outerMap.thirdchild.map((innerMap, i) => (
                <li key={i}>{innerMap.name}</li>
              ))}
            {outerMap.name === "Reporting" &&
              outerMap.fourthchild.map((innerMap, i) => (
                <li key={i}>{innerMap.name}</li>
              ))}
          </DropdownContent>
        </Dropdown>
      ))}
    </MenuContainer>
  );
};

export default MenuBar;

the drop down is working correctly as ive passed it into my stlyed DropDownContent comp

display: ${({ toggle }) => (toggle ? "block" : "none")};

but the issue here is, its dropping down the content for every single menu item on click,

how do i specifically only drop the map data for each specific one as shown in the inline conditional rendering.

Thanks!

What I have tried:

rendering the component on its own 4 different times, changing the onclick