title: onChange event doesn't work as expected when <select> in React
body: <p>I have a table that displays info about the ticket when editing. The tickets are received from an API as an object, in my case is <code>data</code> (eg. <code>apiUrl: {tickets: '/api/tickets'}</code>). <code>data</code> contains all the default states of the ticket, such as: priority, status and type. All the API data is managed in the <code>TicketForm</code> component. See the component code bellow:</p>
  <pre><code>class TicketForm extends Component {
  
      constructor(props) {
          super(props);
          this.handleSelectChange = this.handleSelectChange.bind(this);
          this.save = this.save.bind(this);
          this.state = {
              apiUrl: {tickets: '/api/tickets'},
              data: {
                  id: '',
                  ticket: '',
                  key: '',
                  priority: {
                      id: &quot;&quot;,
                      name: &quot;&quot;
                  },
                  status: {
                      id: &quot;&quot;,
                      name: &quot;&quot;
                  },
                  type: {
                      id: &quot;&quot;,
                      name: &quot;&quot;
                  }
              },
              priority: [],
              status: [],
              type: []
          };
      }
  
      componentWillMount() {
          //Getting the JSON from APIs
      }
  
      save() {
          //Saving/Updating data to server
      }
  
      handleSelectChange(e) {
          for (var i = 0; i &lt; this.state[e.target.name].length; i++) {
              if (this.state[e.target.name][i].id == e.target.value) {
                  this.state.data[e.target.name] = this.state[e.target.name][i];
              }
          }
          this.setState({data: this.state.data});
      }
  
      render() {
          return (
              &lt;table className=&quot;table table-striped&quot;&gt;
                  &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Priority:&lt;/th&gt;
                      &lt;td&gt;
                          &lt;SelectForm
                              onChange={this.handleSelectChange}
                              name=&quot;priority&quot;
                              options={this.state.priority}
                              selected={this.state.data.priority.name}/&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Status:&lt;/th&gt;
                      &lt;td&gt;
                          &lt;SelectForm
                              onChange={this.handleSelectChange}
                              name=&quot;status&quot; options={this.state.type}
                              selected={this.state.data.type.name}/&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Type:&lt;/th&gt;
                      &lt;td&gt;
                          &lt;SelectForm
                              onChange={this.handleSelectChange}
                              name=&quot;type&quot;
                              options={this.state.status}
                              selected={this.state.data.status.name}/&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;/tbody&gt;
  
              &lt;/table&gt;
          )
  
      }
  }
  </code></pre>
  <p>I want to edit this info when clicking on the element, afterwards I render a <code>&lt;select&gt;</code> with a few options that are received from a API as an array, with different options that can be applied for the fields: priority, status and type.  This is a different API then the above (eg. <code>apiUrl: {tickets: '/api/tickets/type'}</code>). After choosing the <code>option</code>, I get the data from the chosen object and replace it, in the initial <code>data</code> object. See the <code>SelectForm</code> component bellow:</p>
  <pre><code>export default class SelectForm extends Component {
  
      constructor(props) {
          super(props);
          this.state = {
              edit: false
          };
      }
  
      editProject() {
          this.setState({edit: true});
      }
  
      blurProject() {
          this.setState({edit: false});
      }
  
      handleChange(e) {
          if (this.props.onChange) {
              this.props.onChange(e);
          }
      }
  
      renderForm() {
          return (
              &lt;select
                  className=&quot;form-control&quot;
                  name={this.props.name}
                  onChange={this.handleChange.bind(this)}
                  onBlur={this.blurProject.bind(this)}&gt;
                  {(Array.isArray(this.props.options) &amp;&amp; this.props.options.length &gt; 0) ? this.props.options.map(option =&gt; {
                      return (
                          &lt;option key={option.id} value={option.id}&gt;{option.name}&lt;/option&gt;
                      )
                  }) : (&lt;option&gt;No Options Found&lt;/option&gt;)}
              &lt;/select&gt;
          )
      }
  
      render() {
          if (this.state.edit) {
              return this.renderForm();
          } else {
              return (
                  &lt;p onClick={this.editProject.bind(this)}&gt;{this.props.selected}&lt;/p&gt;
              )
          }
      }
  }
  </code></pre>
  <p>I am trying to handle the changes events. When choosing other option from the select to set the states as per the one chosen and display the new state in the field after I have selected the option.</p>
  <p>I thought that I achieved this, but somehow the fields are acting strange between them. Priority seems to work fine, but whenever I choose a option from type, the status it changes without even touching it and vice versa.</p>
  <p>I cannot understand what is the problem, please have a look in the <code>handleSelectChange()</code> function logic, and tell what am I doing wrong, or some solutions for this issue.</p>
  <h2>UPDATE:</h2>
  <p>Found in the answers, that this documentation about <a href="https://facebook.github.io/react/docs/update.html" rel="nofollow noreferrer">Immutability Helpers</a> will help. I have tried to use one example from the link, but I get the same result. Please have a look at the code and let me know if I'm doing it right:</p>
  <pre><code>handleSelectChange(e) {
      for (var i = 0; i &lt; this.state[e.target.name].length; i++) {
          if (this.state[e.target.name][i].id == e.target.value) {
              var newState = update(this.state, {
                  data: {
                      [e.target.name]: { $set: this.state[e.target.name][i] }
                  }
              });
          }
      }
      this.setState(newState);
  }
  </code></pre>