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

Question

[PetyaSD]

Есть 3 компонента. Родительский компонент Container, в нем хранятся ContainerItem'ы. При нажатии на кнопку внутри ContainerItem'a должно появляться модальное окно во весь экран, куда будут перекидываться данные ContainerItem'a (Что-то типо добавления пиццы на сайте ДоДо). Как это реализовать?

Answer 1

[Alexandroppolus]

const Container = () => {
  const [shownItemId, setsShownItemId] = useState('');

.....
    <ContainerItem itemId={id} onShowDetails={() => setsShownItemId(id)} ... />
.....
  {shownItemId && <Modal itemId={shownItemId} ... />
};

ContainerItem здесь рендерится в цикле map.
Оный цикл можно вынести в отдельный memo-компонент (которому в пропсы передавать setsShownItemId), чтобы не было перерендера всех итемов при открытии/закрытии модалки, но это уже частности.

Answer 2

[Ростислав]

Ну так например если я правильно понял вопрос
{isStateTrue ? <Modal data={data}/>: null}

А вообще можно использовать либы, я эту часто юзаю https://material-ui.com/ru/components/modal/

Comments

[PetyaSD]

Я стараюсь все писать вручную, чтобы понять и запомнить, спасибо за помощь