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