title: `defaultValue` and `onChange` prevents state changes from updating render
body: <p>I have a multi-tabbed panel that changes a textarea based on the combination of tabs selected. In order for changes in this panel to provide automatic updates, I've provided an <code>onChange</code> listener but this is causing issues with the <code>defaultValue</code> setting and not changing the contents of the <code>textarea</code> when the state changes.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const props = {
   'x': {
     'label': {
       'text': 'Ex'
      }
    },
    'y': {
     'label': {
       'text': 'Why'
      }
    }
  }
  
  class TodoApp extends React.Component {
   constructor(props) {
     super(props);
      this.state = {
       tab: 'x',
        subtab: 'One'
      }
    }
    
    getActiveTab(tab) {
     if (this.state.tab === tab) return ' active';
      else return '';
    }
    
    getActiveSubTab(subtab) {
     if (this.state.subtab === subtab) return ' active';
      else return '';
    }
    
    getOneTab() {
     return(
       &lt;div className="tab-pane active fade in"&gt;
          &lt;textarea cols="16" rows="5" 
            defaultValue={"1. " + props[this.state.tab].label.text} 
            onChange={(e) =&gt; {console.log(e)}}&gt;&lt;/textarea&gt;
        &lt;/div&gt;
      );
    }
    
    getContent() {
     if (this.state.subtab === 'One') {
       return this.getOneTab();
      } else {
      
      }
    }
    
   render() {
     return (
       &lt;div&gt;
         &lt;ul className="nav nav-tabs" role="tablist"&gt;
           &lt;li className={"tabProperties" + this.getActiveTab('x')}&gt;
             &lt;a onClick={() =&gt; this.setState({tab: 'x'})} role="tab"&gt;X&lt;/a&gt;
           &lt;/li&gt;
            &lt;li className={"tabProperties" + this.getActiveTab('y')}&gt;
              &lt;a onClick={() =&gt; this.setState({tab: 'y'})} role="tab"&gt;Y&lt;/a&gt;
            &lt;/li&gt;
         &lt;/ul&gt;
          &lt;div className="tab-content"&gt;
            &lt;ul className="tabProperties nav nav-tabs" role="tablist"&gt;
              &lt;li className={"tabProperties" + this.getActiveSubTab('One')}&gt;
                &lt;a onClick={() =&gt; this.setState({subtab: 'One'})} role="tab"&gt;One&lt;/a&gt;
              &lt;/li&gt;
              &lt;li className={"tabProperties" + this.getActiveSubTab('Two')}&gt;
                &lt;a onClick={() =&gt; this.setState({subtab: 'Two'})} role="tab"&gt;Two&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div className="tab-content"&gt;
            {this.getContent()}
          &lt;/div&gt;
       &lt;/div&gt;
      )
    }
  }
  
  ReactDOM.render(&lt;TodoApp /&gt;, document.querySelector("#app"))</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When the active tabs are "X" and "One", I expect the text field to load the default "1. Ex" string and then when I change tabs to "Y" and "One", I expect the text field to load "2. Why" string. However, the text field doesn't change unless I also change to "Two" tab, which unloads the <code>&lt;textarea&gt;</code> element, and then change back to the "One" tab. How should I handle the requirements of a default value, which is represented via <code>props</code>, and the automatic update necessitating <code>onChange</code> handler?</p>
  
  <p>If I use <code>value</code> to set the text of the text field, it will update the text on state change but it removes the ability for the user to alter the text field.</p>