CODEWITHSUNDEEP
arraysreactjs
Michael DaSilva
Michael DaSilva

Reputation: 157

How to loop an array inside an array with React

Hello I have some data I am trying to display with react that looks like this

snapshot

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>
               );
        });
    }

Upvotes: 2

Views: 14982

Answers (2)

Hemadri Dasari
Hemadri Dasari

Reputation: 33994

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>
  )

Upvotes: 0

Kirk Strobeck
Kirk Strobeck

Reputation: 18589

Something like

renderPost(posts){
  return posts.map(post =>
    <div>
      <h3>{post.question}</h3>
      <ul>
        {post.options.map(option => 
          <li>{option.title}</li>
        )}
      </ul>
    </div>
  )
}

Upvotes: 3

Related Questions