How to use useEffect to change icon of a button on cursor hover in react

Question

How to change the button icon on mouse hover with useEffect?

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

Answer 1

You can change your code to something like this:

const [icon, setIcon] = useState(plusCart)
<Button
  style={{ backgroundColor: "transparent" }}
  type="primary"
  icon={<img src={icon} />}
  onClick={addToBasket}
  onMouseEnter={() => setIcon(minusCart /**for example */)}
  onMouseLeave={() => setIcon(plusIcon /**for example */)}
/>;