title: ReactJS Select Key
body: <p>I have a <code>Select</code> that get's values from API,
  then on change it gets the value from the select and renders a table. but I want the select to display <code>planet.id</code> and <code>planet.name</code>, but doing it using <code>event.target.value</code> wont work since it would pass both values and table wouldn't render!
  Any way of doing this passing for example <code>key={planet.id}</code>?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Planet extends React.Component {
      constructor(props) {
          super(props);
          this.state = {value: 1};
         
          this.handleChange = this.handleChange.bind(this);
          this.handleSubmit = this.handleSubmit.bind(this);
      }
  
      handleChange(event){
          this.setState({value: event.target.value});
      }
  
      render () {
  
          let planets = this.props.state.planets;
          let optionItems = planets.map((planet) =&gt;
                  &lt;option key={planet.id} &gt;{planet.id}&lt;/option&gt;
              );</code></pre>
  </div>
  </div>
  </p>