Next.jsで取得したデータがレンダリングできない

Question

Next.jsとReactの勉強をしています。
getStaticPropsで取得したユーザー情報の一覧を表示させたいのですが、レンダリングされません。
エラーは出ておらず、画面にはh1のUsersだけしか表示されません。
ログには出力されるのでデータは取得できているのですが、なぜ表示されないのかわからず手が止まってしまいました。
原因がわかる方いらっしゃいましたらご教授頂けると幸いです。

const Index = ({ users }) => {
  return (
    <div>
      <h1>Users</h1>
      {users.map(user => {
        {/* console.log(user.name) */ } //user.nameの中身はログに出力される
        <p id={user._id}>{user.name}</p>
      })}
    </div>
  )
}

export const getStaticProps = async () => {
  const res = await fetch('http://localhost:3000/api/users')
  const { data } = await res.json()
  return { props: { users: data } }
}

export default Index

Answer 1

mapの中でreturnしていないからだと思われます。

{users.map((user) => {
  return <p id={user._id}>{user.name}</p>;
})}

とするか、

{users.map((user) => (
  <p id={user._id}>{user.name}</p>
))}

で試してみてください。

Comments

[maskmelon]

ご指摘の通りでした。回答くださりありがとうございました！