title: In React how do I set the value of a select based on an event from another element
body: <p>I'm working on a form in React that has (for the purposes of this question) two select boxes.</p>
  
  <p>I can't use getInitialState because the component already initialized awhile ago, and they caution against updating the state based on the props anyway.</p>
  
  <p>This is the basic structure:</p>
  
  <pre><code>&lt;FormComponent&gt;
    &lt;SelectComponent /&gt; &lt;!-- select box 1 --&gt;
    &lt;SelectComponent default={defaultValue} /&gt; &lt;!-- select box 2 --&gt;
  &lt;/FormComponent&gt;
  </code></pre>
  
  <p>When select box 1 is updated it fires off a FormAction.fieldOneUpdated() event. When the underlying store updates and it trickles down the to the components again I have access to a value "default" I want to pass to select box 2 and have it select that option, but still let the user update it if they want to change it. Just using the prop doesn't seem right because then the select field can mutate the prop. Is there a clean idiomatic React way to accomplish this?</p>