Display multiple JSON records in NextJS

Question

In the NextJS tutorial we are shown how to render a list of Batman show names from a map. Fetching Batman Shows

In that tutorial there is this fragment that gets the data from the map:

<ul>
  {props.shows.map(({show}) => (
    <li key={show.id}>
      <Link as={`/p/${show.id}`} href={`/post?id=${show.id}`}>
        <a>{show.name}</a>
      </Link>
    </li>
  ))}
</ul>

But what if the JSON document is much simpler e.g.

[
 {
  "id":1,
  "text":"first doc",
 },
 {
  "id":2,
  "text":"second doc",
 }
]

How do you prepare the data set (got via the getInitialProps call) and access from the props data?

With this example data the goal would be to build a HTML list of values of "text".

Jeremy Caine · Accepted Answer · 2018-06-26 09:18:48Z

1

It wasn't overly obvious to me from the React documents React Lists and Keys. The map function is for any array that needs to be rendered.

Any top level element of a JSON record can be mapped.

  <ul>
  {props.mydata.map(({id, text}) => (
    <li key={id}>
      <Link as={`/p/${id}`} href={`/post?id=${id}`}>
        <a>{text}</a>
      </Link>
    </li>
  ))}
</ul>

answered Jun 26, 2018 at 9:18

Jeremy Caine

111 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Display multiple JSON records in NextJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related