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>
);
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.
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.
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.