In react js: When I press the button, the input works, it shows and hides password, but the icon in the button does not change!
Here is the state:
const [passwordType, setPasswordType] = useState(true);
Here is my button:
<Button className="btn" onClick={togglePasswordType} style={{ color: "lightgray" }}>
<i className={!passwordType ? 'fas fa-eye-slash' : 'fas fa-eye'}></i>
</Button>
Here is my togglePasswordType:
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" }}>
{So I called the function as a component within the button tag}