I made three buttons using 'map'. It also specified a function to change the false value to true when clicked.
However, if you press one button, all three buttons are activated. How can I activate just one button?
false = #fff true = blue
const [funnalBtn, setFunnalBtn] = useState(false);
const hadleChangeBtnColor = () => {
setFunnalBtn(prev => !prev);
};
<FunnalTarget>
{FUNNAL_DATA.map(data => {
return (
<FunnalButton
key={data.id}
text={data.text}
hadleChangeBtnColor={hadleChangeBtnColor}
funnalBtn={funnalBtn}
/>
);
})}
</FunnalTarget>
You could define a selectedBtn state and pass the id of the selected target to it:
const [selectedBtn, setSelectedBtn] = useState(-1);
const hadleChangeBtnColor = (id) => {
setSelectedBtn(id);
};
<FunnalTarget>
{FUNNAL_DATA.map(data => {
return (
<FunnalButton
key={data.id}
text={data.text}
hadleChangeBtnColor={() => setSelectedBtn(data.id)}
funnalBtn={selectedBtn === data.id}
/>
);
})}
</FunnalTarget>