title: setState with <select> options with values as objects
body: <p>I have a component that renders a select element like so:</p>
  
  <pre><code>&lt;select 
      name="directoryAttributes"
      id="dirSelect"
      className="form-control"
      onChange={this._handleChange}&gt;
      {
          attributes.map(attribute =&gt; {
              return (
                  &lt;option
                      value={attribute}
                      key={attribute.directoryAttributesNo}
                  &gt;{attribute.label}&lt;/option&gt;
              );
          })
      }
  &lt;/select&gt;
  </code></pre>
  
  <p><code>attribute</code> is a plain object with some key/values. I want to call a handleChange to set my components state to that option value (i.e. attribute object). Here is my handleChange</p>
  
  <pre><code>_handleChange(e) {
      e.preventDefault();
      const element = e.target;
      const stateObject = {};
  
      stateObject[element.name] = element.value;
      this.setState(stateObject);
  }
  </code></pre>
  
  <p>The issue is, it appears to set the state of <code>directoryAttributes</code> to <code>[object Object]</code>. Why is this happening, is it a quirk of react or something im missing?</p>
  
  <p>Thanks in advance!</p>
  
  <p>EDIT: the attributes array of objects comes from the state, just to clarify</p>