@MRcracker

Как правильно передать props?

Для работы использую next.js. Подключаю компонент к app.js. Получаю ошибку "props.map is not a function". Если не пытаться передавать данные через props и выполнить код в app.js, то все работает. Поясните, пожалуйста, этот момент и как можно исправить ошибку. Может быть я передаю данные не правильно или в 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
  • Вопрос задан
  • 95 просмотров
Решения вопроса 1
black1277
@black1277
Вольный стрелок
Props это объект - у него нет функции map. Вытащи из пропса нужный массив и к нему примени map.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
29 нояб. 2021, в 00:20
650 руб./за проект
29 нояб. 2021, в 00:12
500 руб./за проект
28 нояб. 2021, в 22:25
5000 руб./за проект