React.js, Модальный Логин, Регистрация

#reactjs #jsx

Вопрос:

Я стремлюсь поставить условие, пока Логин истинен, Регистрация ложна, и то же самое в обратном порядке, В то время как регистрация истинна, Логин ложен, В настоящее время с кодом у меня модалы на экране перекрываются

 const [showModalLog, setShowModalLog] = useState (true);

    const openModalLog = () => {
        setShowModalLog(prev => !prev)
    };

const [showModalReg, setShowModalReg] = useState (false);

    const openModalReg = () => {
        setShowModalReg(prev => !prev)
    };
  return (
    <div className="d-flex justify-content-end">
        <div className="text-center m-3">
            <button className="btn btn-link" type="button" onClick={openModalLog}>inicio</button>
            <ModalLog showModalLog={showModalLog} setShowModalLog={setShowModalLog}/>
        </div>
        <div className="text-center m-3">
            <button className="btn btn-dark" type="button" onClick={openModalReg}>registro</button>
            <ModalReg showModalReg={showModalReg} setShowModalReg={setShowModalReg}/>
        </div>
    </div>
)
 

}

Ответ №1:

вы должны отключить один модальный режим после включения другого.

 const openModalLog = () => {
        setShowModalReg(false)
        setShowModalLog(true)
    };
const openModalReg = () => {
        setShowModalReg(true)
        setShowModalLog(false)
    };

 

Ответ №2:

спасибо, такой код

     const openModalLog = () => {
        setShowModalReg(false)
        setShowModalLog(prev => !prev)
    };

    const openModalReg = () => {
        setShowModalLog(false)
        setShowModalReg(prev => !prev)
    };