Logic when creating a modal window?

Question

React

Hello everyone, tell me the logic of how to open / close a modal window when:
1. Opens when a button-component (Button) is clicked in another component (Main)
2. Closes when a regular div is clicked in the modal window component itself (Modal)
Accordingly, there is a Main, it has a Button and a Modal

Answer 1

In Main, add a state, for example, "show-modal" with a value of false by default.
Also in Main you make a function, for example, "switchModal" in which you do setState({ "show-modal": !this.state."show-modal"}). On the Button you put "switchModal" on click.
Show modal depending on the state. Type In the Modal itself, pass props with the "switchModal" function. Inside Modal you make a function Hang "closeModal" on the element you want to close the Modal on click.