How to close toggle?

Question

React

How to close toggle when clicking anywhere?
So that the closure works wherever I click, and not just on the same div

constructor(props) {
    super(props);
    this.state = {
      etc_dropdown_toggle: false
    }
  }
  handle_etc_dropdown_toggle = () => {
    this.setState(prevstate => {
      return {
        etc_dropdown_toggle:
          prevstate.etc_dropdown_toggle === true ? false : true
      }
    })
  }

Further

<div className='etc_control' onClick={this.handle_etc_dropdown_toggle}></div>

Answer 1

Subscribe to the window's click event.
https://codesandbox.io/s/w2orr6nmzl

Answer 2

probably forward props from parent components, and already there catch onClick and save like toggleOpened = true ... well, or Redux, although if there are a lot of these toggles on the page, there is probably another method more elegant

Answer 3

We draw a transparent div under the button with position: "fixed" and stretch it to the entire page, by clicking on it we call toggle