Как закрыть попап по клику вне его в классовом компоненте?

Question

[Black_Fire]

Есть две кнопки на странице, по клику на каждую из них появляется попап с полупрозрачным затемненным фоном. В стейте App.js есть две переменные со значением false для каждой модалки, которые собственно по клику на эти кнопки меняются через this.setState на true, для их появления путём условного рендеринга. Как в реакте сделать обработчик по клику на область вне модалки, чтобы она закрылась?

Answer 1

[0xD34F]

В родителе:

state = {
  modal: false,
}

hideModal = () => {
  this.setState({ modal: false })
}

render() {
  return (
    ...
      {this.state.modal ? <Modal close={this.hideModal} /> : null}
    ...
  );
}

В компоненте окна:

return (
  <div
    className="modal-overlay"
    onClick={e => (e.currentTarget === e.target) && props.close()}
  >
    <div className="modal-content">
      ...
    </div>
  </div>
);

https://jsfiddle.net/5d0t9feh/