title: Generate options by mapping over array of objects with react-select
body: <p>I'm using <code>react-select</code> to create a Select option in my <code>create-react-app</code> and am trying to map over an array of objects to generate the options. My app loads fine but when I click on the Select I get this error: <code>Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {name}). If you meant to render a collection of children, use an array instead.</code></p>
  
  <p>I'm passing the data to the component via props which is working fine, and the data is structured like this:</p>
  
  <pre><code>const guests = [
      {
          name: 'Kait',
          plus: true,
          plusName: 'Kitty'
      },
      {
          name: 'Séanin',
          plus: true,
          plusName: 'Guest'
      }
  ]
  </code></pre>
  
  <p>And here's the Select component:</p>
  
  <pre><code>&lt;Select
     value={selectedOption}
     onChange={this.handleChange}
     options={
        this.props.guests.map((guest, index) =&gt; {
           return {
              label: guest,
              value: guest,
              key: index
           }
        })
     }
  /&gt;
  </code></pre>
  
  <p>Any ideas on how I can fix this?</p>