Hello I have some data I am trying to display with react that looks like this
there is an Options array inside of the Poll array. How do I display the options array with react when I am already mapping the Poll array? This is what i have so far:
renderPost(posts){
return posts.map((post) => {
return (
<div>
<h3>{post.question}</h3>
</div>
);
});
}
Something like
renderPost(posts){
return posts.map(post =>
<div>
<h3>{post.question}</h3>
<ul>
{post.options.map(option =>
<li>{option.title}</li>
)}
</ul>
</div>
)
}
You should never forget add a key to the jsx element when generate them in loop. The key should be unique and key should be from data, if your data doesn't contain unique id per object then use index as a key like below
Unique id as key from data
return posts.map(post =>
<div key={post.id}>
<h3>{post.question}</h3>
<ul>
{post.options.map(option =>
<li key={option.id}>{option.title}</li>
)}
</ul>
</div>
)
Use index as a key if you don't have unique id in data array
return posts.map((post, index) =>
<div key={`Key${index}`}>
<h3>{post.question}</h3>
<ul>
{post.options.map((option, i) =>
<li key={`Key${i}`}>{option.title}</li>
)}
</ul>
</div>
)
