React: How do I render nested JSON data?

Question

I have this JSON data in another file:

  {
    "feed": [
      {
        "id": 1,
        "text": "Hey everyone I'm looking for help with my meditation, when does everyone do it?",
        "messages": [
          {
            "id": 1,
            "text": "I like to do it first thing in the morning and sometimes at night!",
          },
          {
            "id": 2,
            "text": "Thanks I'll try that!",
          }
        ]
      },
      {
        "id": 2,
        "text": "Have you tried a weighted blanket?",
        "messages": [
          {
            "id": 3,
            "text": "Yeah, they're great, I have the 10lb one!",
          },
          {
            "id": 4,
            "text": "Thank you!",
          }
        ]
      }
    ]
  }

I successfully rendered the two sets of data under "feed" using the map function by doing this:

<div>
  {Data.feed.map(feed => { 
    return(
      <>
        <h4>{ feed.id }</h4>
        <p>{ feed.text }</p>
      </>
    )})
  }
</div>

My question is: how do I also render the inner messages loop? I was told to use a nested .map and here's what I unsuccessfully attempted:

<div>
  {Data.feed.map(feed => {
    return {feed.messages.map(messages => {
      return (
        <>
          <h4>{ feed.id }</h4>
          <p>{ feed.text }</p>
          <h5>{ messages.id }</h5>
          <p>{ messages.text }</p>
        </>
      )}
    )}
  })}
</div>

Zsolt Meszaros · Accepted Answer · 2022-01-17 08:19:24Z

2

You were actually close. You currently loop over the feed array only. You need to use a second map() to iterate over the messages too inside every item of the feed.

Check out the snippet below:

function App() {
  return (
    <div>
      {data.feed.map((feed) => (
        <React.Fragment key={feed.id}>
          <h4>{feed.id}</h4>
          <p>{feed.text}</p>
          <ul>
            {feed.messages.map((message) => (
              <li key={message.id}>{message.text}</li>
            ))}
          </ul>
        </React.Fragment>
      ))}
    </div>
  );
}

const data = {
  feed: [
    {
      id: 1,
      text:
        "Hey everyone I'm looking for help with my meditation, when does everyone do it?",
      messages: [
        {
          id: 1,
          text:
            'I like to do it first thing in the morning and sometimes at night!',
        },
        {
          id: 2,
          text: "Thanks I'll try that!",
        },
      ],
    },
    {
      id: 2,
      text: 'Have you tried a weighted blanket?',
      messages: [
        {
          id: 3,
          text: "Yeah, they're great, I have the 10lb one!",
        },
        {
          id: 4,
          text: 'Thank you!',
        },
      ],
    },
  ],
};

ReactDOM.render(<App />, document.querySelector('#root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

edited Jan 17, 2022 at 8:19

answered Dec 7, 2020 at 1:02

Zsolt Meszaros

23.3k19 gold badges60 silver badges70 bronze badges

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

3 Comments

Nanda Julianda Akbar Over a year ago

also, don't forget to put the key into the feed too.

struggler Over a year ago

Its saying id is undefined

struggler Over a year ago

nevermind it works now, thanks so much dude

Collectives™ on Stack Overflow

React: How do I render nested JSON data?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related