How to properly pass props?

Question

React

For work I use next.js. I connect the component to app.js. I get the error "props.map is not a function". If you do not try to pass data through props and execute the code in app.js, then everything works. Please explain this point and how to fix the error. Maybe I'm not passing the data correctly, or there are some restrictions in next.

export default function Navbar( props ) {
  console.log(props);
  return (
    <div>
      <div className="container">
        <nav className={styles.navbar}>
          <div className={styles.navbarInner}>
            <ul className={styles.navbarList}>
              {props.map((item) =>
                item.links.map((elem) => (
                  <li className={styles.navbarListItem}>
                    <Link href={`/${elem.url}`}>
                      <a className={styles.navbarListLink}>{elem.label}</a>
                    </Link>
                  </li>
                ))
              )}
            </ul>

       
          </div>
        </nav>
      </div>
    </div>
  );
}

function MyApp({ Component, pageProps, props}) {
  
  return (    
  <>
    <Header />
    <Navbar {...props}/>
      <Component {...pageProps} />
    <Footer />

  </>

  )
}

MyApp.getInitialProps = async (ctx) => {
  const res = await axios.get('http://localhost:1337/menu-sections')
  return { props: res.data }
}


export default MyApp

Answer 1

Props is an object - it doesn't have a map function. Pull out the required array from the prop and apply map to it.