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>

You can not use the map method on an object. You should review methods such as Object.keys(), Object.values(), and Object.entries().

However, if you want a specific order, why not create an array of objects and use map to iterate through it.

Also, what were you hoping to accomplish the following code segment?

Lastly, if you have multiple checkboxes, you will need to add a name attribute with the same value for all of them. Otherwise, they are not connected.

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>

You do realize that item is an object like the one below:

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

Why are you setting the value attribute of the input element to an object?

Does the isChecked function take an object as an argument?

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";

Object is a reserved word. Use something different like obj. Also genreList is an array, so you can not use Object.keys() with it. You use Object.keys() with an object.

What exactly are you hoping isChecked will return when it is called and passed an object?

Also, do you have your full project code somewhere (GitHub or Codepen)?

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.