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
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>
);
}
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