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

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

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

CodePudding user response：

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}
  onm ouseEnter={() => setIcon(minusCart /**for example */)}
  onm ouseLeave={() => setIcon(plusIcon /**for example */)}
/>;