Image Not Displaying In Array Of Objects

[modimo]

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>

[modimo]

It is because the src is contained within props property.

[ilenia]

but item.pic have a property of props?

[modimo]

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?

[saanvisenpix]

src in props is possible causing the issue.

[modimo]

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>