title: React value in state never updates
body: <p>The <code>to</code> value in my react app never updates. </p>
  
  <p>I have the following code: </p>
  
  <pre><code>handleToChange(event) {
      this.setState({
          query: this.state.query,
          from: this.state.from,
          to: event.target.value,
          data: this.state.data,
          loading: this.state.loading,
      });
      console.log(event.target.value)
      this.triggerChange();
  }
  </code></pre>
  
  <p><code>console.log(event.target.value)</code> correctly returns the value, but the state is not updated. I know this as the app never updates the <code>to</code> value. The other values of the state update correctly and I use the same method to update them.  </p>
  
  <p>Here is the whole class. (the Handler class is the interface that makes the translation request to a server) </p>
  
  <pre><code>import React, {Component} from 'react';
  import Handler from '../Handler.js';
  
  class Translator extends Component {
  
      constructor() {
          super();
  
          this.state = {
              query: '', from: 'en', to: 'es', data: {}, loading: false
          };
  
          this.handleQueryChange = this.handleQueryChange.bind(this);
          this.handleFromChange = this.handleFromChange.bind(this);
          this.handleToChange = this.handleToChange.bind(this);
  
          this.triggerChange = this.triggerChange.bind(this);
          this.update = this.update.bind(this);
      }
  
      async update() {
  
          this.setState({
              query: this.state.query, from: this.state.from, to: this.state.to, data: this.state.data, loading: true,
          });
  
          let api = await Handler.get();
  
          this.setState({
              query: this.state.query, from: this.state.from, to: this.state.to, data: api, loading: false
          });
      }
  
      triggerChange() {
          Handler.put(this.state.query, this.state.from, this.state.to);
          this.update();
      }
  
      handleQueryChange(event) {
          this.setState({
              query: event.target.value,
              from: this.state.from,
              to: this.state.to,
              data: this.state.data,
              loading: this.state.loading,
          });
      }
  
      handleFromChange(event) {
          this.setState({
              query: this.state.query,
              from: event.target.value,
              to: this.state.to,
              data: this.state.data,
              loading: this.state.loading,
          });
          this.triggerChange();
      }
  
      handleToChange(event) {
          this.setState({
              query: this.state.query,
              from: this.state.from,
              to: event.target.value,
              data: this.state.data,
              loading: this.state.loading,
          });
          this.triggerChange();
      }
  
  
      render() {
  
          const error_message = (
              &lt;div&gt;
                  &lt;button data-toggle="collapse" data-target="#error" className="btn btn-outline-danger"&gt;Error&lt;/button&gt;
  
                  &lt;div className="collapse" id="error"&gt;
                      Oops your query was invalid, this may be because of
                      &lt;ul&gt;
                          &lt;li&gt;&lt;b&gt;The query is nonsense/ word does not exist in the language&lt;/b&gt;&lt;/li&gt;
                          &lt;li&gt;There was a connection error to the api server&lt;/li&gt;
                          &lt;li&gt;Exceeded quota
                              &lt;ul&gt;
                                  &lt;li&gt;To prevent abuse, WordReference only allows a certain number of requests per IP&lt;/li&gt;
                                  &lt;li&gt;Please wait until the quota is reset&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;Bugs: something may be wrong with the code.. my
                              bad &amp;#175;&amp;#92;&amp;#95;&amp;#40;&amp;#12484;&amp;#41;&amp;#95;&amp;#47;&amp;#175;&lt;/li&gt;
                      &lt;/ul&gt;
                      You can always click the link to see the translations on WordReference
                  &lt;/div&gt;
              &lt;/div&gt;
          );
  
  
          const loading_bar = (
              &lt;div&gt;
                  &lt;div className="progress" style={{height: 10}}&gt;
                      &lt;div className="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
                           aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style={{width: '100%'}}/&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
  
          let error = "";
          if (this.state.data['phrase'] === '{invalid}') {
              error = error_message;
          }
  
          let loading = "";
          if (this.state.loading) {
              loading = loading_bar;
          }
  
  
          return (
              &lt;div&gt;
  
                  &lt;div className="row"&gt;
                      &lt;div className="col-sm"&gt;
  
                          &lt;div className="input-box"&gt;
                              &lt;div className="custom-control custom-control-inline"&gt;
                                  From:
                                  &lt;select className="custom-select custom-select-sm" onChange={this.handleFromChange.bind(this)}
                                          defaultValue="en" disabled&gt;
                                      &lt;option value="en" selected&gt;english&lt;/option&gt;
                                      &lt;option value="es"&gt;spanish&lt;/option&gt;
                                      &lt;option value="fr"&gt;french&lt;/option&gt;
                                  &lt;/select&gt;
  
                                  To:
                                  &lt;select className="custom-select custom-select-sm" onChange={this.handleToChange.bind(this)}
                                          defaultValue="es" disabled&gt;
                                      &lt;option value="en"&gt;english&lt;/option&gt;
                                      &lt;option value="es" selected&gt;spanish&lt;/option&gt;
                                      &lt;option value="fr"&gt;french&lt;/option&gt;
                                  &lt;/select&gt;
  
                              &lt;/div&gt;
                              &lt;br/&gt;&lt;br/&gt;
  
                              &lt;div className="form-group"&gt;
                                  &lt;textarea className="form-control" id="" placeholder="Enter Text" rows="4"
                                            onChange={this.handleQueryChange}/&gt;
                              &lt;/div&gt;
  
                              &lt;button onClick={this.triggerChange} className="btn btn-success"&gt;Go&lt;/button&gt;
  
                          &lt;/div&gt;
  
                      &lt;/div&gt;
  
                      &lt;div className="col-sm"&gt;
                          &lt;div className="output-box"&gt;
  
                              &lt;br/&gt;&lt;br/&gt;
                              &lt;div className="card"&gt;
                                  &lt;div className="card-block"&gt;
  
                                      &lt;div className="card-text"&gt;
                                          {this.state.data.phrase}
                                      &lt;/div&gt;
                                      &lt;br/&gt;&lt;br/&gt;
  
                                      &lt;div className="card-footer"&gt;
                                          &lt;a href={this.state.data.url} className="card-link"&gt;WordReference &gt;&lt;/a&gt;
                                      &lt;/div&gt;
  
                                  &lt;/div&gt;
  
                              &lt;/div&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
                  &lt;br/&gt;
  
                  &lt;div&gt;
                      {loading}
                  &lt;/div&gt;
  
                  &lt;div className="error-box text-danger"&gt;
                      {error}
                  &lt;/div&gt;
  
              &lt;/div&gt;
          );
      }
  
  }
  
  export default Translator;
  </code></pre>