How to map an array that is inside another in react-CodePudding

I am having trouble with array mappings. There is an array with data I would like to bind to my component. It looks like the following:

export var arrayObjects: IObjects[] = [
{
    name: 'First Object',
    icon: 'bi bi-capsule',
    subMenu: [
        {
            name: 'First Sub Object',
            path: ''
        },
        {
            name: 'Second Sub Object',
            path: ''
        }
    ]
  }
 ]

The array's type is an interface IObjects which contais name, icon, path and subMenu: IObjects. I need to access the subMenu items in order to create a dynamic menu. Althought, everytime I try to map and call the objects there is no return.

Below you'll be able to see how the mapping I made goes:

   <ul>
    { arrayNavCadastros.map((item:any, subMenu: any) =>(
       <li className="nav-item">
        <i className={item.icon}></i>
        <a href="">{item.name}</a>
         <ul>
         { subMenu.map((name:any) =>(
           <a href="">{name}</a>
          ))}
         </ul>
        </li>
     )) }
   </ul>

I also tried doing something like <a href="">{item.subMenu.name}</a> but there is also no return.

I'm new to react but I'm used to do these kind of bindings in Angular, which seems way easier since you should only do a loop inside the other subMenu from the arrayObjects... I would appreaciate any help!

Note: when I map the first properties of the arrayObjects (which, from the example, returns 'First Object') it works as well as all the titles for the sub menus.

CodePudding user response：

so you have array in subMenu and in each iterate you have object of element so you need to change this :

 { subMenu.map((name:any) =>(
           <a href="">{name}</a>
          ))}

to this :

 { subMenu.map((sub:any) =>(
           <a href="">{sub.name}</a>
          ))}

CodePudding user response：

Few pointers

provide a key for items in the array

 <ul>
    { arrayNavCadastros.map((item:any, subMenu: any) =>(
       <li 
          key={item.id} // key for React to know which item to udpate, when array updated
          className="nav-item"
        >
        <i className={item.icon}></i>
        <a href="">{item.name}</a>
         <ul>
         { subMenu.map((item:any, idx: number) =>(
           <li key={idx}> // key and might need li
             <a href={item.path}>{item.name}</a>
           </li>
          ))}
         </ul>
        </li>
     )) }
   </ul>

or you can create a child component

 <ul>
    { arrayNavCadastros.map((item:any, subMenu: any) =>(
       <li 
          key={item.id} // key for React to know which item to udpate, when array updated
          className="nav-item"
        >
        <i className={item.icon}></i>
        <a href="">{item.name}</a>
          <SubMenu items={subMenu} />
        </li>
     )) }
   </ul>

//child component
const SubMenu = ({ items = []}) => {

  return (
         <ul>
             { subMenu.map((item:any, idx: number) =>(
               <li key={idx}> // key and might need li
                    <a href={item.path}>{item.name}</a>
               </li>
              ))}
          </ul>
  )

}

New React documentation has helpful information on working with array

Hope it helps