title: How to pass props from one class to another in React.js
body: <p>I'm very new to React. I'm practicing by creating a very simple nine grid box, where a user can select what color they want to use at the moment by using a dropdown menu. The only thing is, I can't quite figure out how to pass the variable from the class that contains it (ColorPicker) to the class that contains the grids (Box). Can anyone give me some pointers on how to do this?</p>
  <p>I'm still getting used to passing props to other classes.</p>
  <p>Here's a link to the CodePen: <a href="http://codepen.io/anfperez/pen/RorKge" rel="nofollow noreferrer">http://codepen.io/anfperez/pen/RorKge</a></p>
  <p>Here's my code</p>
  <pre><code>//this displays the color selections for the boxes: red, green, and blue
  var ColorPicker = React.createClass({
  
  handleChange: function(e) {
      var newColor = e.target.value;
      this.props.onChange(color);
  
  },
  
  render: function() {
      
  return (
      &lt;div&gt;
          &lt;select id=&quot;pick-colors&quot; onChange={this.handleChange}&gt;
              &lt;option value=&quot;red&quot;&gt;
                  Red 
              &lt;/option&gt;
  
              &lt;option value=&quot;green&quot;&gt;
                  Green 
              &lt;/option&gt;
  
              &lt;option value=&quot;blue&quot;&gt;
                  Blue 
              &lt;/option&gt;
  
          &lt;/select&gt;
  
      &lt;/div&gt;
      )
  }
  });
  
  //contains the boxes that will eventually change color
  var Box = React.createClass({
  getInitialState: function() {
      return {
        //boxes are initially white
          color: 'white'
      };
  },
  
      changeColor: function(newColor) {
          var newColor = this.state.color;
          this.setState({
              color: newColor
          });
  
      },
  
  render: function() {
      return (
      &lt;div &gt;
      &lt;div className='box' style={{background:this.state.color}} onClick={this.changeColor}&gt; 
      &lt;/div&gt;
      &lt;/div&gt;
      );
  }
  });
  </code></pre>