Looping over an object within React render

Question

I have some JSON that I am looping over in my React app. Within the JSON I am looping over I have an object which contains multiple images. I would like to loop through these images and render each of them as well. Here is what I tried:

const locations = [
  {
    "name": "First Location",
    "photos": [
      {
        "url": "http://placehold.it/250x250",
      }, {
        "url": "http://placehold.it/250x250",
      }
    ]
  }, {
    "name": "Second Location",
    "photos": [
      {
        "url": "http://placehold.it/250x250",
      }, {
        "url": "http://placehold.it/250x250",
      }
    ]
  }
]

const element = (
  <div className="community-list">
    {locations && locations.map((location, index) => (
      <div key={index} className="location">
        <h2>{location.name}</h2>
        {Object.keys(location.photos).map(function(key) {
          return <img src="{location.photos[url]}" />;
        })}
      </div>
    ))}
  </div>
);
ReactDOM.render(element, document.getElementById('mountNode'));

However this gives me 2 broken images

Gangadhar Gandi · Accepted Answer · 2019-11-08 02:31:36Z

2

The actual problem, There is an extra double quotes for img tag. Remove the double quotes enclosing the curly braces. Your images will be displayed

<img src={location.photos[url]} />

answered Nov 8, 2019 at 2:31

Gangadhar Gandi

2,26214 silver badges20 bronze badges

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

Comments

Edrian · Accepted Answer · 2019-11-08 02:25:37Z

1

What you wanna do is this:

const locations = [
  {
    "name": "First Location",
    "photos": [
      {
        "url": "http://placehold.it/250x250",
      }, {
        "url": "http://placehold.it/250x250",
      }
    ]
  }, {
    "name": "Second Location",
    "photos": [
      {
        "url": "http://placehold.it/250x250",
      }, {
        "url": "http://placehold.it/250x250",
      }
    ]
  }
]

const element = (
  <div className="community-list">
    {locations && locations.map((location, index) => (
      <div key={index} className="location">
        <h2>{location.name}</h2>
        {location.photos.map(function(photo) {
          return <img src="{photo.url}" />;
        })}
      </div>
    ))}
  </div>
);
ReactDOM.render(element, document.getElementById('mountNode'));

What this would do is iterate through the photos array of a location, and then use the url node of the photo object.

answered Nov 8, 2019 at 2:25

Edrian

6084 silver badges15 bronze badges

2 Comments

user13286 Over a year ago

Thank you for the response, between your answer and Gangadhar's answer above I was able to get it working! Turns out you don't need to enclose the url in quotation marks.

Edrian Over a year ago

Oh yeah. That's one way of doing it too. Alright man, good luck on your app!

Collectives™ on Stack Overflow

Looping over an object within React render

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related