onclick button toggle icon not working in reactjs

Question

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

when `MdFavoriteBorder` active it should change with `MdFavorite` if click same as both — Shawn, May 17 '22 at 19:13

score 2 · Accepted Answer · answered May 17 '22 at 19:16

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

score 0 · Answer 2 · answered May 17 '22 at 19:19

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

onclick button toggle icon not working in reactjs

2 Answers2