0

I'm trying to map through an array of objects to display the images. Here is my code:

import React from 'react';
import photos from '../photo-store';

class Landing extends React.Component {
  render() {
    const photoDisplay = Object.keys(photos).map((photo, i) => {
      return <img key={i} src={`.${photos[photo][i].src}`} alt='headshot'/>
    })
    console.log('photoDisplay', photoDisplay)
    return (
      <div>
        <p>Photos will go here</p>
        {photoDisplay}
      </div>
    )
  }
}

export default Landing;

The src value is correct when I console.log, but for some reason I'm just getting my alt information rendering, and it's not going through all of the objects in the array. Any pointers on what might be happening here would be awesome. Thanks in advance for your help!

Here is a snippet of what is in "photos":

"photos": [
    {
      id: 1,
      name: "AmberB",
      src: "./images/AmberB.jpg"
    },
    {
      id: 2,
      name: "AmberR",
      src: "./images/AmberR.jpg"
    }
  ]
}
norbitrial
  • 14,716
  • 7
  • 32
  • 59
mayabowman
  • 11
  • 1

1 Answers1

0

You made a small mistake in the return statement. If you have for src attribute the ${photos[photo].src} instead of photos[photo][i].src then it should work.

const photoDisplay = Object.keys(photos).map((photo, i) => {
   return <img key={i} src={`${photos[photo].src}`} alt='headshot'/>
})

Please also consider removing the . as well but not sure about that.

I hope that helps!

norbitrial
  • 14,716
  • 7
  • 32
  • 59