I am working on a project, in which clicking on a specific word in a paragraph opens/closes a component <Overlay/> which contains a child component: <Modal />. A close button is inside the Modal and is attached to a callback function. I tried to use useState and set a boolean value hidden between true and false to handle this case, but it seems the setHidden function doesn't work.
My partial code is here:
const [hidden, setHidden] = useState(false);
const { renderOverlay } = getOverlay();
const openModal = text => (
<h1
onClick={() => {
openOverlay();
}}
>
{`${text}`}
</h1>
);
const closeModal = () => {
setHidden(true);
console.log(hidden); // false
};
const openOverlay = () => {
!hidden
? renderOverlay(
<Modal
title="ABCDE"
message="
You must be a member of to access the app
"
close={{ onClose: closeModal, text: 'Close' }}
/>
)
: renderOverlay();
};
return (
<span
className={paragraph.style === 'bold' ? 'boldspan' : null}
key={paragraph.paragraphKey}
style={{ color: paragraph.color }}
>
{paragraph.isLink ? openModal(paragraph.text) : paragraph.text + addSpace}
{paragraph.break ? <br /> : null}
</span>
);
Modal:
export default function Modal({ title, message, close, route }) {
return (
<ModalStyles>
<div className="top__border" />
<div className="content">
<span className="title">{title}</span>
<span className="message">{message}</span>
<div className="button__group">
{close && <Button type="primary" text={close.text} onClick={close.onClose} />}
{route && <Button type="primary" text={route.text} onClick={route.onRoute} />}
</div>
</div>
</ModalStyles>
);
}
Does anyone know why I cannot change the hidden property in the closeModal function?