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} /> Add a comment |
3 Answers
const [buttonClicked, setButtonClicked] = useState(false); const addToBasket = () => { ... setButtonClicked(true); }; ... <Button ... icon={<img src={buttonClicked ? someIcon : plusCart} />} onClick={addToBasket} /> 
6 Comments
Yaman
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.
tiedantebreak
how can we do this for cursor hover, change icons of a button on hover in react ??
Yaman
@tiedantebreak Remove
onClick prop and try this props onMouseEnter={() => setButtonClicked(true)} onMouseLeave={() => setButtonClicked(false)}Yaman
@tiedantebreak Let me know if it works.
tiedantebreak
yes it worked thanks
|
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} /> 
2 Comments
tiedantebreak
how can we do this for cursor hover, change icons of a button on hover in react ?? –
Jasmin Heifa
Check out this answer: stackoverflow.com/questions/32125708/…
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);}} /> ) 
1 Comment
tiedantebreak
how can we do this for cursor hover, change icons of a button on hover in react ?? –