How to make modal window component appear on button click in React?

Question

React

There are 3 components. Parent component Container, it stores ContainerItems. When you click on the button inside the ContainerItem'a, a full-screen modal window should appear, where the ContainerItem's data will be transferred (Something like adding pizza on the DoDo website). How to implement it?

Answer 1

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

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

The ContainerItem here is rendered in the map loop.
This cycle can be moved to a separate memo component (to which setsShownItemId should be passed to the props) so that all items are not re-rendered when the modal is opened / closed, but these are particulars.

Answer 2

Well, for example, if I understood the question correctly , in general, you can use either, I often use this one https://material-ui.com/ru/components/modal/
{isStateTrue ? <Modal data={data}/>: null}