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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.