title: How to pass a state className variable to another component in react
body: <p>I'm not sure if this is the best way to do things but i want to pass one class name variable to another component in react.</p>
  
  <p>This is a button which launch an animation onClick just adding one className to few elements of it. Also i created the var = overlay this.state.cliked ? 'open' : '' to launch an overlay, if i have the overlay html on the same component it works fine but i have to do little components as i can.</p>
  
  <pre><code>var React = require('react');
  var OverlayView = require('./OverlayView.jsx');
  
  var StatusBarButtonView = React.createClass({
      getInitialState: function() {
      return {cliked: false};
      },
      handleClick: function(event) {
      this.setState({cliked: !this.state.cliked});
      },
      render: function() {
      var fondo = this.state.cliked ? 'active' : '';
      var overlay = this.state.cliked ? 'open' : '';
  
          return (
              &lt;div&gt;
                  &lt;div className={"statusbar-button-container " + (fondo)} onClick={this.handleClick}&gt;
                      &lt;img src="images/navbar-element-icon-cross.png" className={"rotate " + (fondo)}/&gt;
                  &lt;/div&gt;      
              &lt;/div&gt;
              &lt;OverlayView className={overlay} /&gt;
          );
      }
  });
  
  module.exports = StatusBarButtonView; 
  </code></pre>
  
  <p>As you see the  is the component of the overlay i want to pass to this component but im not sure if it can just be alone and be launched when this one handle the click. im a bit lost with react, not so much online info and im new with this.</p>
  
  <p>This is the Overlay component:</p>
  
  <pre><code>var React = require('react');
  
  var OverlayView = React.createClass({
  
          return (    
              &lt;div className={"overlay overlay-slidedown " + this.props.class}&gt;
                  &lt;nav&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Work&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Clients&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
          );
      }
  });
  
  module.exports = OverlayView;
  </code></pre>
  
  <p>I'm not sure how to do this, im looking for examples around the web but nothing very clear for me :(</p>