title: React - Get Div Element from another Component
body: <p>My Objective is to make a simple open and close menu in React. Im used to vannila javascript where i can use <strong>getElementById</strong> to get my elements and store them in a variable, and do whatever i want whit them. Now im trying to do that whit react, but its getting a little dificult, i have try to use <strong>ref</strong>.</p>
  
  <p>So this is my menu, i want to click on the button and hide the menu and show the content, that is my objective.</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Grid, Row, Col } from 'react-flexbox-grid';
  
  class Menu extends Component {
  
    render() {
    function handleClick(e) {
      var mobileContainer = this.refs.mobileContent1;   
      console.log(mobileContainer);
    }
  
      return (
        &lt;Grid fluid&gt;
        &lt;div className="menuContent"&gt;
          &lt;Row center="xs"&gt;
            &lt;Col xs={12}&gt;
              &lt;span href="" className="button" onClick={handleClick}&gt;Hello, world!&lt;/span&gt;
            &lt;/Col&gt;                 
          &lt;/Row&gt;
          &lt;/div&gt;
        &lt;/Grid&gt;
      );
    }
  
  
  }
  
  export default Menu;
  </code></pre>
  
  <p>When i console log mobileContainer i get <strong>this is undefined</strong></p>
  
  <p>This is my content component</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Grid, Row, Col } from 'react-flexbox-grid';
  
  class MobileContent extends Component {
  
    render() {
      return (
        &lt;Grid fluid&gt;
          &lt;div className="mobileContent" ref="mobileContent1"&gt;
            &lt;Row center="xs"&gt;
              &lt;Col xs={12}&gt;
                &lt;span className="button"&gt;Hello, world!&lt;/span&gt;
                &lt;span className="close"&gt;X&lt;/span&gt;              
              &lt;/Col&gt;                 
            &lt;/Row&gt;
          &lt;/div&gt;
        &lt;/Grid&gt;
      );
    }
  }
  
  export default MobileContent;
  </code></pre>
  
  <p>Thanks for the Help</p>