React JS, When clicked one option, other options are also being selected - reactjs

Question

Below is Options component It generates bunch of options The problem is that when I click One option Others are also being selected. I know why this is happening but I couldnt solve it
const InterestGenerator = () => {
const interest_emojis = [
{ name: "Comedy" },
{ name: "Comedy" },
{ name: "Comedy" },
{ name: "Comedy" },
{ name: "Comedy" },
{ name: "Comedy" },
{ name: "Comedy" },
{ name: "Comedy" },
{ name: "Comedy" },
{ name: "Comedy" },
{ name: "Comedy" },
{ name: "Comedy" },
];
const [selected, setSelected] = useState(false);
const handleClick = (e) => {
selected ? setSelected(false) : setSelected(true);
};
return (
<div className="interests_options">
{interest_emojis.map((interest) => {
return (
<div
className={`interest ${selected ? " interest_selected" : ""}`}
onClick={handleClick}
>
{!selected && (
<img
className="interest_emoji"
src={require("../assets/emoji_" + interest.name + ".png")}
alt="comedy_emoji"
/>
)}
{selected && <DoneIcon />}
<span>{interest.name}</span>
</div>
);
})}
</div>
);
};
export default InterestGenerator;
enter image description here

Answer 1

As you can see you have a single selected state in the component. Hence even if you click once it's set for everybody.
The solution would be to have a component each having their own state that is doing what you're doing and rendering a list of those components.
Something like this will work :
This is the solo component :
const interestEmojiComponent = ({name})=>{
const [selected, setSelected] = useState(false);
const handleClick = (e) => {
selected ? setSelected(false) : setSelected(true);
};
return (
<div
className={`interest ${selected ? " interest_selected" : ""}`}
onClick={handleClick}
>
{!selected && (
<img
className="interest_emoji"
src={require("../assets/emoji_" + name + ".png")}
alt="comedy_emoji"
/>
)}
{selected && <DoneIcon />}
<span>{name}</span>
</div>
);
}
And this is the generator Component :
const InterestGenerator = () => {
const interest_emojis = [
{ name: "Comedy" },
{ name: "Comedy" },
{ name: "Comedy" },
{ name: "Comedy" },
{ name: "Comedy" },
{ name: "Comedy" },
{ name: "Comedy" },
{ name: "Comedy" },
{ name: "Comedy" },
{ name: "Comedy" },
{ name: "Comedy" },
{ name: "Comedy" },
];
return(
<div className="interests_options">
{interest_emojis.map((interest) => <InterestEmojiComponent name={interest.name}/>)}
</div>
)
}

Answer 2

You are using just one selected state for all options which lead to your unexpected behavior. The solution here is to keep the selected state for each option
const [interest_emojis, set_interest_emojis] = useState([
{ name: "Comedy", selected: false },
{ name: "Comedy", selected: false },
{ name: "Comedy", selected: false },
{ name: "Comedy", selected: false },
{ name: "Comedy", selected: false },
{ name: "Comedy", selected: false },
{ name: "Comedy", selected: false },
{ name: "Comedy", selected: false },
{ name: "Comedy", selected: false },
{ name: "Comedy", selected: false },
{ name: "Comedy", selected: false },
{ name: "Comedy", selected: false }
]);
const handleClick = (index) => {
const arr = [...interest_emojis];
arr[index].selected = !arr[index].selected;
set_interest_emojis(arr);
};
Demo