Return first index in multidimensional array using map

Question

I have following scenario where I need loop through a data set and return multiple post. Each post has a title and few images attached to it. I am able to loop through all the data, but its returning the same title multiple times instead of just once.

Desired output:

My title img 1 img 2

Current Output:

My title image1 My title image 2

JS:

const mappedFlickr = this.state.articles.map((flickr, i) => { 
        return ( 
          flickr.fields.featuredImage.map((st, i) => { 
             return ( 
                <div>
                <span>{flickr.fields.title}</span>
                <img src={st.fields.file.url +'?w=300&h=300'} />
                </div>
              )
          })
        )
     })

return (
      <section>
         { mappedFlickr }
      </section>
    )

Yes, flickr.fields.title will be the same title regardless what image you have in the loop. Why don't you move the <span> out of the featuredImage.map, right in the <section>? — Bergi
– Bergi, Commented Jun 27, 2017 at 9:33

Yury Tarabanko · Accepted Answer · 2017-06-27 09:45:46Z

1

Move inner map inside div

const mappedFlickr = this.state.articles.map((flickr, i) => { 
        return ( 
           <div key={i}>
              <span>{flickr.fields.title}</span>
              {
               flickr.fields.featuredImage.map((st, j) => 
                 (<img key={j} src={st.fields.file.url +'?w=300&h=300'} />)
               )
              }

            </div>
        )
     })

answered Jun 27, 2017 at 9:45

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

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

Comments

Shaniqwa · Accepted Answer · 2017-06-27 09:43:14Z

0

Try moving <span>{flickr.fields.title}</span> outside of the inner loop

answered Jun 27, 2017 at 9:43

Shaniqwa

2,0942 gold badges19 silver badges31 bronze badges

Collectives™ on Stack Overflow

Return first index in multidimensional array using map

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related