Aquí trato de alternar los íconos de reacción cuando hago clic en el botón, pero aún no funciona:
Aquí está mi código:
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> Intento con los botones de los iconos de reacción en el evento Click, pero no alterna con ambos iconos si MdFavoriteBorder debería cambiar con MdFavorite al hacer clic en el botón igual que cuando MdFavorite activa el cambio con MdFavoriteBorder
Parece demasiado complicado. Crearía un estado booleano que alternaría así:
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> ); }Puedes hacer esto de una manera fácil como
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>Al hacer clic, setChangeIcon establecerá el valor de changeIcon en falso o verdadero dependiendo del estado anterior y el componente se volverá a cargar y el ícono se alternará