How to map an array that is inside another in react

Question

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.

Ali Sattarzadeh · Accepted Answer · 2022-11-13 10:32:09Z

1

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>
          ))}

answered Nov 13, 2022 at 10:32

Ali Sattarzadeh

3,6272 gold badges9 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

KimiH Over a year ago

Oh, thanks a bunch! Another thing I had to change was the object I was using the function map. Instead of going for subMenu.map(), I changed it to item.subMenu.map(), since the subMenu iteration is inside another for the subMenu titles.

Ali Sattarzadeh Over a year ago

that's right, I didn't see that too

Azzy · Accepted Answer · 2022-11-13 10:42:46Z

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

Collectives™ on Stack Overflow

How to map an array that is inside another in react

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related