title: Display form selection in div in React
body: <p>I am trying to create a UI that updates as the client selects an option from a dropdown menu. I've tried to set this up as follows: A react Parent (<code>App</code>) that renders two child components (<code>Inputs</code> and <code>Display</code>). <code>Inputs</code> renders a dropdown menu form. <code>Display</code> renders html output that displays the selection made in <code>Input</code>. </p>
  
  <p>Example below:</p>
  
  <pre><code>    var Inputs=React.createClass({
      getInitialState: function() {
          return {value: 'cat'}
      },
      handleChange: function() {
          this.setState({value: event.target.value})
      },
      render: function() {
          return (
              &lt;div&gt;
                  &lt;form&gt;
                      &lt;select value={this.state.value}
                          onChange={this.handleChange}&gt;
                          &lt;option value='cat'&gt; Cat &lt;/option&gt;
                          &lt;option value='dog'&gt; Dog &lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          )
      }
  })
  
  var Display=React.createClass({
      render: function(){
          return (
              &lt;div&gt;
                  &lt;b&gt; {this.props.l1} &lt;/b&gt;
              &lt;/div&gt;
          )
      }
  })
  
  var App = React.createClass({
      render: function() {
          return (
              &lt;div&gt;
                  &lt;Inputs ref="inputs" /&gt;
                  &lt;Display l1={this.refs.inputs.state.value} /&gt;
              &lt;/div&gt;
          )
      }
  })
  
  ReactDOM.render(
  &lt;App /&gt;,
  document.getElementById('app')
    );
  </code></pre>
  
  <p>I expect the value to change when the client selects a new value from the dropdown. </p>
  
  <p>More fundamentally, I think I'm misunderstanding how states and properties are passed in React. </p>