title: How to refer a variable to the child component with React?
body: <pre><code>class Main extends Component{
  
     /*Skip function and constructor...*/
  
     var previewContainer = this.refs.localMedia;
      previewContainer.appendChild("&lt;div&gt;Test&lt;/div&gt;");
  
    /*Skip some code...*/
  
  
      render() {
  
          return (
  
              &lt;div className="container my-4"&gt;
                  &lt;div className="row"&gt;
                      &lt;div className="col"&gt;
                          &lt;div&gt;Screen section&lt;/div&gt;
                          &lt;div className="screen_section"&gt;
                              {this.state.showMyScreen ? &lt;MyScreen localMediaAvailable={this.state.localMediaAvailable} /&gt; : null  }
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  
  
  }
  
  
  
      class MyScreen extends Component {
  
          constructor(props) {
              super(props)
          }
  
          render() {
  
              let showLocalTrack = this.props.localMediaAvailable ? (
                  &lt;div className="flex-item"&gt;&lt;div ref="localMedia" style={{height:320, width:640}} /&gt; &lt;/div&gt;) : '';   
  
              return (
                  &lt;div&gt;
                      &lt;div&gt;My Screen&lt;/div&gt;
                      {showLocalTrack}
                  &lt;/div&gt;
              )
          }
      }
  </code></pre>
  
  <p>I write some react code as above, and I have an error message of fail to appendChild of undefined, the problem is I cannot refer the variable with        <code>var previewContainer = this.refs.localMedia;</code>
  Is it possible to have any method to solve this problem? Or instead of serate them into two component, I should write them in one instead?</p>