title: How to Set a state of parent component from child component in react js
body: <pre><code> how do i  change the state of parent in child component
  I'm trying to create a popover in react 
  
  Parent component
  
      class App extends Component {
        constructor(props) {
          super(props);
          this.state = {
            status: false,
            anchorEl: null
          };
        }
  
        showpop = () =&gt; {
  
  
          this.setState({ status: !this.state.status });
        };
  
  
      render() {
          return (
  
              &lt;React.Fragment&gt;
                &lt;p id="popup" onClick={this.showpop}&gt;
                  Click me
                &lt;/p&gt;
                {this.state.status ? (
                  &lt;Popup status={this.state.status}&gt;test&lt;/Popup&gt;
                ) : (
                  ""
                )}
              &lt;/React.Fragment&gt;
          );
        }
      }
  </code></pre>
  
  <p>i just passed the state of status to popover component .
  This is the child component</p>
  
  <pre><code>export default class popup extends Component {
    constructor(props) {
      super(props);
      this.state = {
        popupStatus: false
      };
    }
  
    componentWillMount() {
      document.addEventListener("click", this.handleclick, false);
    }
    componentWillUnmount() {
      document.removeEventListener("click", this.handleclick, false);
    }
  
  
    handleclick = e =&gt; {
      if (this.node.contains(e.target)) {
        return;
      } else {
  </code></pre>
  
  <p>//here what to do?</p>
  
  <pre><code>    }
    };
  
    render() {
      return (
        &lt;React.Fragment&gt;
          &lt;Mainbox
            status={this.props.status}
            ref={node =&gt; {
              this.node = node;
            }}
          &gt;
            {this.props.children}
          &lt;/Mainbox&gt;
        &lt;/React.Fragment&gt;
      );
    }
  }
  </code></pre>
  
  <p>In the handleclick function else part ,
  i tried these
  I change the node style display to none but in the window need two clicks to show a popover</p>
  
  <p>you can see the Mainbox component in child  is created using styed components library</p>
  
  <p>is there any way to hide the elemet and change the parent state? </p>