Display Image Next To Genre

I am working with react and I have a list of checkboxes and I want to be able to display images that go with the correct genre. I have the images stored locally but I am unsure how to do that.


const genreList = ["Action", "Comedy", "Sci Fi", "Drama", "Thriller", "Animated"
   , "Animated", "Bollywood", "Superhero"]

//want to display these images next to the different genres
<img src={require('../../../images/action.jpg')} className="action" alt="logo"/>
<img src={require('../../../images/comedy.jpg')} className="comedy" alt="logo"/>
<img src={require('../../../images/sci fi.jpg')} className="scifi" alt="logo"/>
<img src={require('../../../images/drama.jpg')} className="drama" alt="logo"/>
<img src={require('../../../images/thriller.jpg')} className="thriller" alt="logo"/>
<img src={require('../../../images/animated.jpg')} className="animated" alt="logo"/>
<img src={require('../../../images/bollywood.jpg')} className="drama" alt="logo"/>
<img src={require('../../../images/superhero.jpg')} className="superhero" alt="logo"/>


const [checked, setChecked] = useState([]);

// Add/Remove checked item from list
const handleCheck = (event) => {
  var updatedList = [...checked];
  if (event.target.checked) {
    updatedList = [...checked, event.target.value];
  } else {
    updatedList.splice(checked.indexOf(event.target.value), 1);
  }
  setChecked(updatedList);
};


const handleClose = (e) => {
    navigate("/");
  }

// Return classes based on whether item is checked
const isChecked = (item) =>
checked.includes(item) ? "checked-item" : "not-checked-item";


  return (

    <div className='it'>
    <div className='popup-box'>
    <div className='box'>
    <button className='btn-close' onClick={handleClose}></button>
    <h2 className='fav'>Your favourite genre(s)</h2>
    <div className='checkboxes'>
      {genreList.map((item, index) => (
         <div key={index}>
         <input value={item} type="checkbox" onChange={handleCheck} />
          //displays all the genres in the list 
         <span className={isChecked(item)}>{item}</span>
         </div>
      ))}
      <div>
    </div>
    </div>
    <button className='btn-done' onClick={handleClose}>Done</button>
    </div>
  </div>
  </div>
);

if you can have a dictionary with genre: url kind of key/value pairs, you could just add those in your react component

I changed it to an object but the problem is my map function now does not work how can I iterate through an object like this?

const genreList = {"Action": <img src={require('../../../images/action.jpg')} className="action" alt="logo"/>,
"Comedy": <img src={require('../../../images/comedy.jpg')} className="comedy" alt="logo"/>,
"Sci Fi" : <img src={require('../../../images/sci fi.jpg')} className="scifi" alt="logo"/>,
"Drama" : <img src={require('../../../images/drama.jpg')} className="drama" alt="logo"/>,
"Thriller" : <img src={require('../../../images/thriller.jpg')} className="thriller" alt="logo"/>,
"Animated" : <img src={require('../../../images/animated.jpg')} className="animated" alt="logo"/>,
"Bollywood" : <img src={require('../../../images/bollywood.jpg')} className="drama" alt="logo"/>,
"Superhero" : <img src={require('../../../images/superhero.jpg')} className="superhero" alt="logo"/>
}

<div className='checkboxes'>
      {genreList.map((item, index) => (
         <div key={index}>
         <input value={item} type="checkbox" onChange={handleCheck} />
         <span className={isChecked(item)}>{item}</span>
         </div>
      ))}
      <div>

I have same question thanks for your reply experts.

I am still having an issue iterating over it. I created the array of objects but my map is not
counting the items I have which I represent as objects in my array.


const genreList = [{genre : "Action", image : <img src={require('../../../images/action.jpg')} className="action" alt="logo"/>},

{genre : "Comedy", image : <img src={require('../../../images/comedy.jpg')} className="comedy" alt="logo"/>},

{genre : "Sci Fi" , image : <img src={require('../../../images/sci fi.jpg')} className="scifi" alt="logo"/>},

{genre : "Drama" , image : <img src={require('../../../images/drama.jpg')} className="drama" alt="logo"/>},

{genre : "Thriller", image : <img src={require('../../../images/thriller.jpg')} className="thriller" alt="logo"/>},

{genre : "Animated", image : <img src={require('../../../images/animated.jpg')} className="animated" alt="logo"/>},

{genre : "Bollywood", image : <img src={require('../../../images/bollywood.jpg')} className="drama" alt="logo"/>},

{genre : "Superhero", image : <img src={require('../../../images/superhero.jpg')} className="superhero" alt="logo"/>}

]

<div className='checkboxes'>
      {genreList.map((item) => (
         <div key={item.key}>
         <input name="acheckbox" value={item} type="checkbox" onChange={handleCheck} />
         <span className={isChecked(item)}>{item}</span>
         </div>
      ))}
 <div>

I am trying to make it take an object as an argument but I can’t do Object.keys not sure why.

const isChecked = (Object) =>

checked.includes(Object.keys(genreList)) ? "checked-item" : "not-checked-item";

isChecked deals with the strike through effect on checkboxes it is not really needed. I need to display my checkbox with an image beside it and I am still unsure how to do it. I need to get the key and the value to display.

  <div className='checkboxes'>
      {genreList.map((item) => (
         <div key={item.key}>
         <input name="acheckbox" value={item.genre} type="checkbox" onChange={handleCheck} />
         <img src={item.image} alt=""/>
         </div>
      ))}
  <div>

in your array, item.image is an element tho, not an url. You need to be coherent with how things work.

How would I get the image value though?

The same way you are doing it now just don’t set the require to the src on an img element, but just on the object property.

Okay I did that but I get the error [Error: Cannot find module ‘[object Object]’]


const genreList = [{genre : "Action", image : require(<img src='../../../images/action.jpg' className="action" alt="logo"/>)},

{genre : "Comedy", image : require(<img src='../../../images/comedy.jpg' className="comedy" alt="logo"/>)},

{genre : "Sci Fi" , image : require(<img src='../../../images/sci fi.jpg' className="scifi" alt="logo"/>)},

{genre : "Drama" , image : require(<img src='../../../images/drama.jpg' className="drama" alt="logo"/>)},

{genre : "Thriller", image : require(<img src='../../../images/thriller.jpg' className="thriller" alt="logo"/>)},

{genre : "Animated", image : require(<img src='../../../images/animated.jpg' className="animated" alt="logo"/>)},

{genre : "Bollywood", image : require(<img src='../../../images/bollywood.jpg' className="drama" alt="logo"/>)},

{genre : "Superhero", image : require(<img src='../../../images/superhero.jpg' className="superhero" alt="logo"/>)}

]

only the url there, and maybe the class name, so you can write an image element in your component, and add those with variables

Just a little opinion of mine, can you try deleting require and then do something like:

<span className={isChecked(item)}>{item.image}</span>

Okay I am not sure why my array is being looped over more then 8 times. I took out the require part but I think I am missing something.

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

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

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

{genre : "Drama" , image : <img src='../../../images/drama.jpg' className="drama" alt="logo"/>},

{genre : "Thriller", image : <img src='../../../images/thriller.jpg' className="thriller" alt="logo"/>},

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

{genre : "Bollywood", image : <img src='../../../images/bollywood.jpg' className="drama" alt="logo"/>},

{genre : "Superhero", image : <img src='../../../images/superhero.jpg' className="superhero" alt="logo"/>}

]

{genreList.map(item => (
      <div key={item.genre + "abc"}>
        <input name="acheckbox" value={item.genre} type="checkbox" onChange={handleCheck} />
        <span className={setChecked(item)}>{item.image}</span>
        {console.log(item.genre)}
        {console.log(item.image)}
        <span>{item.genre}</span>
      </div>
    ))}

It works fine when there is no <span className={setChecked(item)}>{item.image}</span>. I think if we edit this code it will work. Even though it loops over 8 times my genres, it still only displays 8 of them.

I am closing the thread.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.