title: How to pass an object value in a form's select field onChange (using React, without Redux)
body: <p>I'm currently working on a react component with a simple form (no redux, just using react-bootstrap for styling)</p>
  
  <p>I'm pulling data from a database in the following form:</p>
  
  <pre><code>[
    {
      "id":"123",
      "name":"Amy Pond",
      "age":"22",
      "reputation":22000
    },
    {
      "id":"124",
      "name":"Clara Oswald",
      "age":"24",
      "reputation":35000
   }
   ...
  ]
  </code></pre>
  
  <p>and putting it into an object:</p>
  
  <pre><code>let userlist = [];
  userlist = addUsers(this.state.users);
  </code></pre>
  
  <p>I used map to populate a dropdown based on this data, and can correctly set the state of the user to the selected one from the drop down: </p>
  
  <pre><code>&lt;FormControl
     id = "user"
     componentClass="select"
     onChange={this.handleChange}
  &gt;
     {userlist.map((r , i) =&gt;
       &lt;option
         key={i}
         value={r.name}&gt;
         {r.name}
       &lt;/option&gt;
    )}
  &lt;/FormControl&gt;
  </code></pre>
  
  <p>using handleChange()</p>
  
  <pre><code>handleChange(event) {
    this.setState({
      value: event.target.value,
      // reputation: ???? // here's where I'm running into issues
      // age: ???????  // and here
  });
  </code></pre>
  
  <p>My problem is, I need the user's age and reputation in the handleChange function to set their states accordingly. I've tried passing just <code>r</code> instead of <code>r.name</code> but I get <code>[object Object]</code> back. </p>
  
  <pre><code>console.log ("Handle Change Value: " + event.target.value);
  </code></pre>
  
  <p>if I try <code>event.target.value.name</code> I get <code>undefined</code> back. </p>
  
  <p>The only thing that has sort of worked so far, is using JSON.stringify, but I feel like that's not the right way to do this. I've also thought about just searching through the objects once I've gotten just the name, but if there was a lot of objects I think that would be extremely inefficient? I'm also not sure how to do that.</p>
  
  <p>Can anyone please help me find a way to pass these two extra values so I can set the state? Is map even the best way to create the options? I honestly feel like this is such a simple thing, but I'm still new to react and I've been struggling with this for far too long! </p>
  
  <p>Any ideas / changes / comments / way to make this better would be much appreciated! I realize that perhaps using something like redux-form would make this easier, but I'm hoping there's a simple way to do it without that just for now. </p>
  
  <p><strong>Edit:</strong>
  onChange should have been set to <code>onChange = {this.handleChange}</code>, just pasted the wrong code from my attempts to troubleshoot. I'm binding this in the constructor: </p>
  
  <pre><code>constructor(props) {
    super(props);
    ...
    this.handleChange = this.handleChange.bind(this);
  }
  </code></pre>