Así que estoy tratando de cerrar un modal y abrir el otro, pero ambos siguen cerrándose sin motivo y no tengo idea de lo que estoy haciendo mal.
Mi código
const Modal = ({ closeModal }) => { const [ openModal2, setOpenModal2 ] = useState(false) const closeModalFunction = () => { closeModal(false) } const openModal2Function = () => { closeModalFunction() setOpenModal2(true) } } return ( <div className='modal'> <div className='modal-overlay' onClick={closeModalFunction}></div> <div className='open-modal-2'> <button className='open-modal-2-button' onClick={openModal2Function}>Continue</button> </div> </div> {openModal2 && <Modal2 closeModal2={setOpenModal2} />} </div> ) }Sí, es porque su Modal2 está en su componente Modal1, por lo que cuando cierra su Modal1, también cierra su funcionalidad Modal2. Puedes hacer esto de esta manera
const Parent = () => { const [state, setState] = useState({ showModal1: false, showModal2: false }) const onCloseModal1 = () => { setState(prev => ({...prev, showModal1: false, showModal2: true})) } const onCloseModal2 = () => { setState(prev => ({...prev, showModal2: false})) } return <> {state.showModal1 && <Modal1 onCloseModal1={onCloseModal1} />} {state.showModal2 && <Modal2 onCloseModal2={onCloseModal2}/>} </> }