Recently, I decided to repurpose a login/register modal by incorporating a Modal to manage its visibility.
In the index.js file, I made the following changes:
const Form = ({ initialState = STATE_SIGN_UP, showPopUp = STATE_HIDE }) => {
const [mode, toggleMode] = useToggle(initialState);
const [display, toggleDisplay] = useToggleDisplay(showPopUp);
return (
<Modal className="modal" show={showPopUp} size="lg">
<Container pose={mode === STATE_LOG_IN ? "signup" : "login"}>
<div className="container__form container__form--one">
<FormLogin mode={mode} />
</div>
<div className="container__form container__form--two">
<FormSignup mode={mode} />
</div>
<Overlay toggleMode={toggleMode} mode={mode} />
</Container>
</Modal>
);
};
In addition, I included a close icon in FormLogin along with an onClick event. To ensure functionality, I utilized a console.log for testing purposes. However, I am struggling to figure out how to close the modal from within the FormLogin class when the close action occurs.
I attempted to utilize the toggleDisplay function, but encountered difficulties. The implementation of toogleDisplay is as follows:
export const STATE_SHOW = true
export const STATE_HIDE = false
const useToggleDisplay = initialState => {
const [display, setDisplay] = useState(initialState)
const toggleDisplay = () =>
setDisplay(display === STATE_SHOW ? STATE_HIDE : STATE_SHOW)
return [display, toggleDisplay]
}
export default useToggleDisplay
Does anyone have any suggestions or solutions?