title: React contolled component change value of select
body: <p>I have controlled component(I hope I understood the concept correctly).
  Here is fragment of app.js (parent(main) component).</p>
  
  <pre><code>...
  
  &lt;Select options={this.state.patterns} 
  default={this.state.activePattern} select={this.selectPattern}/&gt;    
  </code></pre>
  
  <p>Here is Select component. It is controlled - am I right?</p>
  
  <pre><code>    var Select = React.createClass({
          getInitialState(){
              return {
                  value: this.props.default
              };
          },
          handleChange(e){
              var value = e.target.value;
              this.setState({value: value});
              this.props.select(value);
          },
  
          render(){
              return (
                  &lt;select value={this.state.value} onChange={this.handleChange}&gt;
                      {this.props.options.map(
                          (option, i)=&gt;(
                              &lt;option value={option} key={i}&gt;
                                  {option}
                              &lt;/option&gt;
                          )
                      )}              
                  &lt;/select&gt; 
              );
          }   
      });
  </code></pre>
  
  <p>When user selects something - handleChange got called and we are happy.</p>
  
  <hr>
  
  <p>But I also want to be able to change selected value from my app.js. 
  How can I make that?</p>