javascript - How to pass props from one class to another in React.js -

i'm new react. i'm practicing creating simple 9 grid box, user can select color want use @ moment using dropdown menu. thing is, can't quite figure out how pass variable class contains (colorpicker) the class contains grids (box). can give me pointers on how this?

i'm still getting used passing props other classes.

here's link codepen: http://codepen.io/anfperez/pen/rorkge

here's code

//this displays color selections boxes: red, green, , blue var colorpicker = react.createclass({  handlechange: function(e) {     var newcolor = e.target.value;     this.props.onchange(color);  },  render: function() {  return (     <div>         <select id="pick-colors" onchange={this.handlechange}>             <option value="red">                 red              </option>              <option value="green">                 green              </option>              <option value="blue">                 blue              </option>          </select>      </div>     ) } });  //contains boxes change color var box = react.createclass({ getinitialstate: function() {     return {       //boxes white         color: 'white'     }; },      changecolor: function(newcolor) {         var newcolor = this.state.color;         this.setstate({             color: newcolor         });      },  render: function() {     return (     <div >     <div classname='box' style={{background:this.state.color}} onclick={this.changecolor}>      </div>     </div>     ); } }); 

you must use component contains these 2 , manages selected color state. when colorpicker gets new value, container's state updates, , box gets it's color value containers state.

colorpicker should props callback execute when color value changes.

var colorpicker = react.createclass({  render: function() {  return (     <div>         <select id="pick-colors" onchange={this.props.onchange}>             <option value="red">                 red              </option>              <option value="green">                 green              </option>              <option value="blue">                 blue              </option>          </select>      </div>     ) } });  var app = react.createclass({     getinitialstate: function() {         return {              selectedcolor: '#ffffff'         }         },     oncolorpicked: function(e) {         this.setstate({selectedcolor: e.target.value })     },     render: function() {         return (             <div>               <colorpicker onchange={this.props.oncolorpicked} />               <box color={this.state.selectedcolor} />             </div>         )     } 

}

the stateful component should app. passes state through props other components.