En react js: cuando presiono el botón, la entrada funciona, muestra y oculta la contraseña, ¡pero el ícono en el botón no cambia!
Aquí está el estado:
const [passwordType, setPasswordType] = useState(true);Aquí está mi botón:
<Button className="btn" onClick={togglePasswordType} style={{ color: "lightgray" }}> <i className={!passwordType ? 'fas fa-eye-slash' : 'fas fa-eye'}></i> </Button>Aquí está mi alternarPasswordType:
const togglePasswordType = () => { setPasswordType(!passwordType) }const RenderSwitchEye = useCallback (() => { return (<i className={passwordType ? "fa fa-eye" : "fa fa-eye-slash" } aria-hidden="true">); }, [passwordType] );
<Button className="btn" onClick={togglePasswordType} style={{ color: "lightgray" }}>
{Así que llamé a la función como un componente dentro de la etiqueta del botón}