Tengo un modal que aparece en un tablero si una condición es verdadera y muestra una casilla de verificación. Parece que no puedo cambiar a Modal en la función onClick. Aquí hay un ejemplo del código.
Tablero
const conditionalAgreement = false; <Modal showModal={showModal} conditionalAgreement={conditionalAgreement} />Modal
const Modal = ({ conditionalAgreement }) => { const [showModal, setShowModal] = useState(false); const [checkboxCondition, setCheckboxCondition = useState(false); useEffect(() => { if (conditionalAgreement) { setShowModal(true); } }, [conditionalAgreement]); const OnChangeHandler = () => { setCheckboxCondition(!setCheckboxCondition); }; const OnClickHandler = () => { setShowModal(false); }; return ( <div className={css.modal}> <div className={css.checkbox}> <CheckboxComponent value={checkboxCondition} onChange={OnChangeHandler} description={tick this box"} /> </div> <div className={css.buttonContainer}> <ButtonComponent onClick={OnClickHandler} > Save </ButtonComponent> </div> </div> ); }; export default Modal;Tablero:
const Dashboard = () => { const [showModal, setShowModal] = useState(false); return ( {showModal && ( <Modal showModal={showModal} closeModal={() => setShowModal(false)} /> )} ) }Modal:
const Modal = ({ showModal, closeModal }) => { const [checkboxCondition, setCheckboxCondition = useState(false); const onChangeHandler = () => { setCheckboxCondition(!setCheckboxCondition); }; const onClickHandler = () => { closeModal(); }; return ( <div className={css.modal}> <div className={css.checkbox}> <CheckboxComponent value={checkboxCondition} onChange={onChangeHandler} description={tick this box"} /> </div> <div className={css.buttonContainer}> <ButtonComponent onClick={onClickHandler} > Save </ButtonComponent> </div> </div> ); }; Ahora, como menciona @RobinZigmond, algo en su componente Dashboard debería establecer showModal en true para que aparezca su Modal.