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

Question

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

Hemadri Dasari · Accepted Answer · 2019-02-04 21:36:07Z

1

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

edited Feb 4, 2019 at 21:36

answered Feb 4, 2019 at 21:32

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

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

3 Comments

Enigmadan Over a year ago

Someday we will have our optional chaining and you can re-write it as props?.selectedTheatre?.nazivGalerije?.map(...)

Hemadri Dasari Over a year ago

Yes but that is possible only in Type script. Isn’t it?

Enigmadan Over a year ago

@HemadriDasari "TypeScript unfortunately does not yet support an optional chaining operator. While there is longstanding community interest, TypeScript is waiting for clarity from TC39 on the direction JavaScript will ultimately take with respect to optional chaining support." You can check here to see the current status.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related