title: How do I set an event listener on the parent component in ReactJS?
body: <p>I'm trying to create a custom context menu that activates when the user right-clicks on a certain part of my page (I'd like the browser's default context menu on the rest of the page).</p>
  
  <p>From the parent element I'm calling the child element:</p>
  
  <pre><code>&lt;ContextMenu clickDomain={this.parentRef}&gt;
  </code></pre>
  
  <p>(and of course in the constructor I've created the ref: <code>this.parentRef = React.createRef();</code>).</p>
  
  <p>In the child <code>&lt;ContextMenu&gt;</code> component I try to set the domain for the <code>contextmenu</code> event using the passed ref:</p>
  
  <pre><code>componentDidMount() {
          const self = this;
          console.log(this.props);
          console.log(!!self.props.clickDomain);
          console.log(!!self.props.clickDomain.current);
          const domain = self.props.clickDomain &amp;&amp; self.props.clickDomain.current 
              ? self.props.clickDomain.current : document;
          console.log(domain);
          domain.addEventListener('contextmenu', 
               this.openContextMenu(self));
      }
  </code></pre>
  
  <p>(Among other things, <code>openContextMenu</code> sets state <code>visible: true</code> and the x and y coords.) </p>
  
  <p>But the <code>!!self.props.clickDomain.current</code> is false (<code>self.props.clickDomain.current</code> is null) and <code>domain</code> is <code>document</code>.</p>
  
  <p>So somehow the child component "did mount" already even though the parent ref isn't in the DOM?</p>
  
  <p>How can I pass to the child component a live reference to the parent component, so that I can set an event listener on the parent from within the child?</p>