How to change the icon of a button when it is clicked, button already has a on click event

Question

I want to change the icon on the button whenever it is clicked, The button has onClick event to add product to basket.

      <Button
          style={{ backgroundColor: "transparent" }}
          type="primary"
          icon={<img src={plusCart} />}
          onClick={addToBasket}
        />

score 2 · Accepted Answer · answered Jan 19 '22 at 13:32

2

const [buttonClicked, setButtonClicked] = useState(false);

const addToBasket = () => {
  ...
  setButtonClicked(true);
};

...

<Button
  ...
  icon={<img src={buttonClicked ? someIcon : plusCart} />}
  onClick={addToBasket}
/>

answered Jan 19 '22 at 13:32

Yaman KATBY

1,814
10
24

If this works for you please click the checkmark (✓) to accept it. That way others know that you've been (sufficiently) helped. Also, see stackoverflow.com/help/someone-answers. – Yaman KATBY Jan 19 '22 at 13:50
how can we do this for cursor hover, change icons of a button on hover in react ?? – tiedantebreak Feb 04 '22 at 05:00
@tiedantebreak Remove `onClick` prop and try this props `onMouseEnter={() => setButtonClicked(true)} onMouseLeave={() => setButtonClicked(false)}` – Yaman KATBY Feb 04 '22 at 10:09
@tiedantebreak Let me know if it works. – Yaman KATBY Feb 04 '22 at 10:10
yes it worked thanks – tiedantebreak Feb 04 '22 at 18:26
@tiedantebreak Greate, don't forgot to upvote the answer – Yaman KATBY Feb 05 '22 at 09:09

score 1 · Answer 2 · answered Jan 19 '22 at 13:32

1

You can use a boolean state for this, maybe like so:

const [buttonClicked, setButtonClicked] = useState(false);

const addToBasket = () => {
  setButtonClicked(true);
  // your code..

};

<Button
          style={{ backgroundColor: "transparent" }}
          type="primary"
          icon={buttonClicked ? <img src={otherIcon}/> : <img src={plusCart}/>}
          onClick={addToBasket}
        />

answered Jan 19 '22 at 13:32

Jasmin Heifa

46
3

how can we do this for cursor hover, change icons of a button on hover in react ?? – – tiedantebreak Feb 04 '22 at 05:00
Check out this answer: https://stackoverflow.com/questions/32125708/how-can-i-access-a-hover-state-in-reactjs – Jasmin Heifa Feb 07 '22 at 15:10

score 1 · Answer 3 · answered Jan 19 '22 at 13:32

1

You can store information if button was clicked in useState hook and onClick change this state:

const [clicked, setClicked] = React.useState(false)

return(
 <Button
          style={{ backgroundColor: "transparent" }}
          type="primary"
          icon={<img src={clicked ? plusCart : minusCart} />}
          onClick={(e)=>{
           setClicked(true);
           addToBasket(e);}}
        />
)

answered Jan 19 '22 at 13:32

Wraithy

1,722
1
5
13

how can we do this for cursor hover, change icons of a button on hover in react ?? – – tiedantebreak Feb 04 '22 at 05:00

How to change the icon of a button when it is clicked, button already has a on click event

3 Answers3