Image Not Displaying In Array Of Objects

I have an array with different genres represented as checkboxes and images accompanying them.

const genreList = [{genre : "Action", pic : <img src='../../../images/action.jpg' className="action" alt="logo1"/>},

 {genre : "Comedy", pic : <img src='../../../images/comedy.jpg' className="comedy" alt="logo2"/>},

 {genre : "Sci Fi" , pic : <img src='../../../images/sci fi.jpg' className="scifi" alt="logo3"/>},

 {genre : "Drama" , pic : <img src='../../../images/drama.jpg' className="drama" alt="logo4"/>},
 
 {genre : "Thriller", pic : <img src='../../../images/thriller.jpg' className="thriller" alt="logo5"/>},

 {genre : "Animated", pic : <img src='../../../images/animated.jpg' className="animated" alt="logo6"/>},

 {genre : "Bollywood", pic : <img src='../../../images/bollywood.jpg' className="drama" alt="logo7"/>},
 
 {genre : "Superhero", pic : <img src='../../../images/superhero.jpg' className="superhero" alt="logo8"/>}

 ]

and the issue is I can’t seem to display the image with the checkbox.

  <div className='checkboxes'>
    {genreList.map(item => (
      <div key={item.genre + "abc"}>
        <input name="acheckbox" value={item.genre} type="checkbox" onChange={handleCheck} />
        {console.log(item.genre)}
        {console.log(item.pic)}
        //gives me img src but it does not display
        <img src={item.pic.props.src} alt={item.pic.props.alt}/>
        <span>{item.genre}</span>
      </div>
    ))}
      <div>
    </div>
    <div className='favGenres'>
    {`Favourite genres are: ${genrePreferences}`}
    </div>
    </div>

Why are you referencing props.src here?

It is because the src is contained within props property.

but item.pic have a property of props?

Yes props is contained within it. I will give you part of my log to show.

{$$typeof: Symbol(react.element), type: 'img', key: null, ref: null, props: {…}, …}

1. props:
  1. alt: "logo7"
  2. className: "drama"
  3. src: "../../../images/bollywood.jpg"
  4. [[Prototype]]: Object

that is what gets printed when I print item.pic it resembles an object. Is there a way I can modify my array of objects so my images can be displayed?

Can you post a link to your full project code (i.e. GitHub)? We can pull down the project to test things and let’s us see how everything is put together.

src in props is possible causing the issue.

I figured out the solution I changed the array and put require in the src and that seems to display the images.


const genreList = [{genre : "Action", pic : 'action', title : 'action'},

 {genre : "Comedy", pic: 'comedy', title : 'comedy'},

 {genre : "Sci Fi" , pic: 'sci fi', title : 'sci fi'},

 {genre : "Drama" , pic: 'drama' , title : 'drama'},
 
 {genre : "Thriller", pic: 'thriller', title : 'thriller'},

 {genre : "Animated", pic : 'animated' , title : 'animated'},

 {genre : "Bollywood", pic :'bollywood', title : 'bollywood'},
 
 {genre : "Superhero", pic : 'superhero', title : 'superhero'}

 ]
<div className='favSpace'>
    {genreList.map(item => (
      <div key={item.genre + "abc"}>
        <input name="acheckbox" value={item.genre} type="checkbox" onChange={handleCheck} />
        {console.log(item.genre)}
        {console.log(item.pic)}
        <img className='imagesHere' src={require('../../../images/' + item.pic + '.jpg')} alt={item.title}/>
        <span className='genreChoice'>{item.genre}</span>
      </div>
    ))}
      <div>
    </div>
    <div className='favGenres'>
    {`Favourite genres are: ${genrePreferences}`}
    </div>
    </div>