how to activate only one of the three buttons

January 3, 2022

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>

enter image description here
enter image description here

>Solution :

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>