Как правильно сделать модульное окно в React?

Question

[Vadim Chorrny]

Здравствуйте!
У меня есть модульное окно и сделал я его компонентом ( в отдельном файле ), при нажатии на div елемент нужно показать это окно.
( Модульное окно у меня в одном файле, див-элемент в другом )
Как правильно сделать у меня есть две догадки:
1) Сделать модалку и див в одном файле ( минусы: плохой код, проблемы с стилизацией )
2) Использовать React-Route ( даже не знаю как правильно использовать )

Answer 1

[Demian Smith]

Вот так:

const [modalIsVisible, setModalIsVisible] = useState(false);

return (
  <>
    <button onClick={() => setModalIsVisible(true)}>Show modal</button>
    { modalIsVisible && <Modal onClose={() => setModalIsVisible(false)} /> } 
  </>
)

Comments

[Vadim Chorrny]

Спасибо, ваш вариант помог больше!

Answer 2

[Kirill Makarov]

Делаешь ипморт окна, и создаешь стэйт булевый. В случае тру отображаешь
const [modal, setModal]= useState(false)

Функция для показа
Const showModal = () =>{
setModal(true)
}

Верстка
{!showModal ?(
Верстка
) : <ТвойКомпонентМодалка/>
}