onclick button toggle icon not working in reactjs-CodePudding

Here i try to toggle react icons when click the button but it still not working:

Here is my code:

const [anchorEl, setAnchorEl] = useState(null);

  const open = Boolean(anchorEl);
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

   <button onClick={handleClick} className="top-rated-car-react-button">
            {anchorEl ? (
              <MdFavoriteBorder
                style={{
                  color: "#F76631", 
                }}
              />
            ) : (
              <MdFavorite
                style={{
                  color: "#F76631",
                }}
              />
            )}
   </button>

I try with react icons buttons onClick event but it is not toggling with both icons if MdFavoriteBorder it should change with MdFavorite when click the button same as when MdFavorite active change with MdFavoriteBorder

CodePudding user response：

Looks too complicated. I would create a boolean state which I would toggle then like this:

import { useState } from "react";
import { MdFavorite, MdFavoriteBorder } from "react-icons/md";

export default function App() {
  const [favorite, setFavorite] = useState(false);
  const toggleFavorite = () => setFavorite((prev) => !prev);

  return (
    <button onClick={toggleFavorite} className="top-rated-car-react-button">
      {favorite ? (
        <MdFavoriteBorder style={{ color: "#F76631" }} />
      ) : (
        <MdFavorite style={{ color: "#F76631" }} />
      )}
    </button>
  );
}

https://codesandbox.io/s/cool-poincare-wm1ite

CodePudding user response：

You can do this in a easy way like

const [changeIcon, setChangeIcon] = useState(true);
  const handleClick = (event) => {
    setAnchorEl(!changeIcon);
  };

   <button onClick={handleClick} className="top-rated-car-react-button">
            {changeIcon ? (
              <MdFavoriteBorder
                style={{
                  color: "#F76631", 
                }}
              />
            ) : (
              <MdFavorite
                style={{
                  color: "#F76631",
                }}
              />
            )}
   </button>

On click the setChangeIcon will set the value of changeIcon to false of true depending on previous state and the component will reload and the icon will be toggled