title: React: update a field value based on another field in dynamically generated form
body: <p>I'm trying to find out the "proper" way to do the following in React:</p>
  
  <ul>
  <li>I have a form with two fields, <code>url</code> and <code>title</code>. </li>
  <li>Whenever <code>url</code>'s value changes, I make an API call to <a href="http://embed.ly/" rel="nofollow">Embedly</a> to retrieve metadata about the link.</li>
  <li>Once the metadata has been retrieved, I want to update the <code>title</code> field with the result. </li>
  </ul>
  
  <p>The difficulty here is that the <code>url</code> and <code>title</code> fields are not in the same component. Here's the basic structure of the form (I'm using <a href="https://github.com/christianalfoni/formsy-react" rel="nofollow">Formsy</a>):</p>
  
  <pre><code>&lt;Formsy.Form onSubmit={this.submitForm} onChange={this.updateState} ref="form"&gt;
    {fields.map(field =&gt; &lt;FormComponent 
      name={field.name}
      type={field.type}
      value={field.value}
    /&gt;)}
    &lt;Button type="submit"&gt;Submit&lt;/Button&gt;
  &lt;/Formsy.Form&gt;
  </code></pre>
  
  <p>As you can see, the form loops over an array of fields and calls a generic <code>&lt;FormComponent/&gt;</code> component for each of them, which is basically a big <code>switch</code> that then calls the appropriate <a href="https://github.com/twisty/formsy-react-components" rel="nofollow">Formsy Component</a> based on the field's <code>type</code>. </p>
  
  <p>The logic for querying Embedly is already working inside the component for the <code>url</code> field, but I'm not sure if there's a way to accomplish what I want while still using the default <code>Input</code> component for <code>title</code>?</p>