title: How to access child component's child from parent component in react?
body: <p>After hours of brainstorm, i decided to ask the question from you. The situation is that i use react-rnd, which is a draggable and resizable extension for react, which is a component with a few child components. I have this code right now:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    //this component has the property: id
      
      deleteEvent(){
          console.log(this.props.id) //returns undefined
      }
      render(){
          console.log(this.props.id) //returns correct value
          return(
              &lt;Rnd&gt;
                  &lt;div onClick={this.deleteEvent}&gt;&lt;/div&gt;
              &lt;/Rnd&gt;
          )
      }</code></pre>
  </div>
  </div>
  </p>
  
  <p>As i see the DOM tree, in react devtools, the div is 5 levels down from this component. This is a big problem for me. I don't want to edit the Rnd's components. If i create a component for the button (the div), it doesn't help, because i still need to pass the id to the button. I considered about connecting the button component to redux, but it still doesn't know which id it has. So someone help me please to pass the right id to the div</p>