CODEWITHSUNDEEP
reactjs
srdjan_susa
srdjan_susa

Reputation: 111

Reactjs map nested array to load image urls in <img> tag

I have this in my state

theatre: [
  {
    "naslov": "Dear Elena Sergeevna",
    "id": "t00",
    "godina": "2015.",
    "naslovnaSlika": "http://xx.com/content/djs_prez.png",
    "naslovKlasa": "sergeevna_naslov",
    "nazivGalerije": ["http://xx.com/content/skulpture/skp4.jpg", "http://xx.com/content/skulpture/skp3.jpg", "http://xx.com/content/skulpture/skp5.jpg", "http://xx.com/content/skulpture/skp0.jpg"],
    "slikaKlasa": "sergeevna"
  }, {
    "naslov": "Osecaj brade",
    "id": "t01",
    "godina": "2017.",
    "naslovnaSlika": "http://x.com/content/Osecaj-brade_prez.png",
    "naslovKlasa": "osecajbrade_naslov",
    "nazivGalerije": [{"1":"http://xx.com/content/skulpture/skp4.jpg"}, {"2":"http://xx.com/content/skulpture/skp3.jpg"}, {"3":"http://xx.com/content/skulpture/skp5.jpg"}, {"4":"http://xx.com/content/skulpture/skp0.jpg"}],
    "slikaKlasa": "osecajbrade"
  }
]

I am getting a single object through an event listener and when i print it out I get the whole object. I would like to use the links from "nazivGalerije" and to make a loop that prints out images.

This is what I'm trying but it isn't working

const ContainerTheatre = (props) => {
  return (
      <div className={props.klasa.join(' ')}>
        <div className="text_segment">
        console.log{props.selectedTheatre.nazivGalerije}
        <p>{props.selectedTheatre.naslov}</p>
        {props.selectedTheatre.nazivGalerije.map(slika => {
          return <ImageLoop
                    url={slika} />
                  })}
        </div>
        <img onClick={props.zatvori} src="http://xx.com/content/close_w.png" alt="close" className="close-popup" />
      </div>
  )
}

the "selectedTheatre" is the single object that I pass to know the one that is clicked on. what I want is to pass all links from the array to another component via this 

{props.selectedTheatre.nazivGalerije.map(slika => {
              return <ImageLoop
                        url={slika} />
                      })}

it may be the worst possible approach so thanks for all the advice

Upvotes: 2

Views: 837

Answers (1)

Hemadri Dasari
Hemadri Dasari

Reputation: 33974

You need to do conditional check for nested objects before accessing them like below

And also you need to set unique key to ImageLoop element inside map like below otherwise you will always get last element

Change

  {props.selectedTheatre.nazivGalerije.map(slika => {
          return <ImageLoop
                    url={slika} />
                  })}

To

 {props.selectedTheatre && props.selectedTheatre.nazivGalerije && props.selectedTheatre.nazivGalerije.map((slika, index)=> {
          return <ImageLoop Key={'Key-'+index} url={slika} />
  })}

Upvotes: 1

Related Questions