Access Modal State

[pkl-kirito]

Hi, how to access the state of the modal is open or close ? Because I have a separate modal, and useEffect only trigger once on page load, but I want to trigger the useEffect every time modal is open.

function HistoryModal(){

    useEffect(() => {
        console.log(`effect`);
        return () => {
        }
    }, []);


    return (
        <>
            <input type="checkbox" id="history-modal" className="modal-toggle" />
            <label htmlFor="history-modal" className="modal">
                <label  className="w-11/12 max-w-5xl backdrop-blur-sm bg-modalBlack bg-opacity-80 rounded-2xl border border-stroke">
                    
                </label>
            </label>
        </>
    )
}

export default HistoryModal

[saadeghi]

Here the value of checkbox defines if the modal is open or not so in React you can bind a value to checkbox and then open/close the checkbox as you need.

const [isChecked, setIsChecked] = useState(false)

<input type="checkbox" id="history-modal" className="modal-toggle" checked={isChecked} />

Let me know if you have any questions

[pkl-kirito]

i saw v3.0.0 is using dialog, how to get the dialog state is open or close ?

[fini]

HTMLDialogElement: open property