score:0

i think the issue might be that it can't deconstruct the array you're passing. if you do ({obj}), it's being deconstructed and it accesses its properties. if it can't be deconstructed, it fires up an error. it should work like this

const nav = ( navitems = [] ) => {

const subitems = navitems.map(el => el.submenu)

return (
  {navitems.map(item => (
    <li>
      <a href="#">{item.label}</a>
      <ul>
        {subitems[0].map(subitem => (
            <li>{subitem.item}</li>
        ))}
      </ul>
    </li>
  ))}
)

}

score:1

here you go :

const nav = ({ navitems = [{submenu : []}] })

// i think you also need to set for label also, else will throw error while render
const nav = ({ navitems = [{ label: "default label" ,submenu : []}] })

suggestion , you can change the code block to something like this :

const nav = ({ navitems = [] }) => {
  // there is no need of below line
  // const subitems = navitems.map(el => el.submenu)  

  return (
    {navitems.map((item) => (
      <li>
        <a href="#">{item.label}</a>
        <ul>
          {item.submenu.map(subitem => ( //<---- you can use it like this
              <li>{subitem.item}</li>
          ))}
        </ul>
      </li>
    ))}
  ) 
}

Related Query

More Query from same tag