Javascript 在地图中使用地图有条件地渲染数据

Javascript 在地图中使用地图有条件地渲染数据,javascript,arrays,json,reactjs,array.prototype.map,Javascript,Arrays,Json,Reactjs,Array.prototype.map,Im目前正在通过一些本地JSON数据进行映射,并试图根据每个对象的名称渲染出每个对象 目前,我已经映射到它上面,显示每个名称,现在有条件地检查并映射每个名称的特定数据,只是尝试在这里获得正确的语法 import menu from "./data/menudata"; const MenuBar = () => { return ( <MenuContainer> {menu.children.map((outerMap, i) =

Im目前正在通过一些本地JSON数据进行映射,并试图根据每个对象的名称渲染出每个对象

目前,我已经映射到它上面,显示每个名称,现在有条件地检查并映射每个名称的特定数据,只是尝试在这里获得正确的语法

import menu from "./data/menudata";

const MenuBar = () => {
  return (
    <MenuContainer>
      {menu.children.map((outerMap, i) => (
        <Dropdown>
          <DropBtn key={i}>
            <h2>{outerMap.name}</h2>
          </DropBtn>
          <DropdownContent>
           {outerMap.name === 'Account' && (
           
              {menu.firstchild.map((innerMap, i) => 
                <li>{firstchild.name}</li>
                )}
           )
           } 
          </DropdownContent>
        </Dropdown>
      ))}
    </MenuContainer>
  );
};

export default MenuBar;

谢谢

应该是
outerMap.firstchild
而不是
menu.firstchild


{outerMap.name=='Account'&&outerMap.firstchild.map((innerMap,i)=>…)}

cheers基本上不需要条件语句中的第二组花括号
"name": "menu",
  "children": [
    {
      "name": "Account",
      "firstchild": [
        {
          "name": "Preference"
        },
        {
          "name": "Contact"
        },
        {
          "name": "Manage"
        }
      ]
    },
    {
      "name": "Design",
      "secondchild": [
        {
          "name": "Theme"
        },
        {
          "name": "Gallery"
        },
        {
          "name": "Template"
        }
      ]
    },