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

Question

[MRcracker]

Для работы использую 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

Comments

[WbICHA]

Может быть я передаю данные не правильно или в next ограничения какие-то есть.

Хуже, ты не знаешь языка, о чём я тебе уже написал в удалённом вопросе.

[MRcracker]

WbICHA, так помог бы лучше решить проблему, если знаешь решение, а не спамил в ответах. Все мы учимся. Ты тоже когда-то не знал то, что знаешь сейчас и говорить человеку о том что он что-то не знает, но пытается узнать не самая лучшая помощь

Answer 1

[black1277]

Props это объект - у него нет функции map. Вытащи из пропса нужный массив и к нему примени map.

Comments

[MRcracker]

Подскажите, как мне потом положить эти данные в props для дальнейшей передачи в компонент?

[black1277]

Вот, пожалуйста https://learn.javascript.ru/object Нужно создать объект с нужными ключами и свойствами.

let links = ['google.ru', 'yandex.ru']; // массив
let props = { // объект
 massiv: links // пара ключ: значение (в данном случае массив)
};

[MRcracker]

black1277, большое спасибо, что помогаете разобраться.

А что сделать в том случае, если мне ответом от сервера объект приходит?

[black1277]

Объект можно преобразовать в массив, например, этими методами Object.keys, values, entries или написать свою функцию.

[MRcracker]

black1277, эти свойства я знаю, но не могу понять как их применить в моем случае