title: Nested React <input> element loses focus on typing
body: <p>I have:</p>
  
  <ul>
  <li>A component <code>App</code> with a child component <code>Filter</code>.</li>
  <li>The child needs to mutate state in the parent, which it is doing via an <code>&lt;input onChange={handler}&gt;</code>.</li>
  <li>The <code>handler</code> is a <code>prop</code> that is set on the child by the parent.</li>
  </ul>
  
  <p>All good so far.</p>
  
  <p>However, whenever the a key is pressed on the input, it loses focus. I presume it's being destroyed and re-rendered.</p>
  
  <p>If I hoist the <code>Filter</code> component up a level into the <code>App</code> and drive it off the state in that, then everything works as you'd expect, but obviously I'd like to be able to nest the components and share the state at the top level.</p>
  
  <p>I guess calling setState at this higher level is causing the whole thing to get re-rendered, but I thought the diffing algorithm would be clever enough to avoid replacing the  node in the <code>Filter</code> sub-component and thus avoid blurring the focus on the <code>&lt;input&gt;</code>.</p>
  
  <p>What am I doing wrong / how can I fix this? Is there a better way to structure this?</p>
  
  <p><strong>Working JSBin here: <a href="http://jsbin.com/fexoyoqi/10/edit?html,js,output" rel="noreferrer">http://jsbin.com/fexoyoqi/10/edit?html,js,output</a></strong></p>
  
  <pre><code>var App = React.createClass({
    getInitialState: function() {
      return {
        items: ["Tom", "Dick", "Harry"],
        filterText: ''
      };
    },
  
    setFilterText: function (event) {
      this.setState({filterText: event.target.value});
    },
  
    render: function () {
      var filter = React.createClass({
        render: function () {
          return &lt;input value={this.props.filterText} onChange={this.props.onChange}/&gt;;
        }
      });
  
      var rows = this.state.items
        .filter(function (item) {
          return this.state.filterText == ''
            ? true
            : item.toLowerCase().indexOf(
                this.state.filterText.toLowerCase()) &gt; -1;
        }.bind(this))
        .map(function(item) {
          return &lt;li&gt;{item}&lt;/li&gt;
        });
  
      return (
        &lt;div&gt;
          Filter: &lt;filter filterText={this.state.filterText}
            onChange={this.setFilterText}/&gt;
          &lt;ul&gt;
            {rows}
          &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  });
  
  React.renderComponent(&lt;App /&gt;, document.body);
  </code></pre>