title: return array of objects from props React JS
body: <p>so I have the following component that is a dropdown list created using <a href="https://github.com/JedWatson/react-select" rel="nofollow noreferrer">react-select</a>.</p>
  
  <pre><code>import React from 'react'
  import Select from 'react-select';
  
  const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' }
  ];
  
  
  class MealsFilters extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        selectedOption: null,
      };
    }
  
    handleChange = (selectedOption) =&gt; {
      this.setState({ selectedOption });
      console.log(`Option selected:`, selectedOption);
    }
  
    render() {
      const { selectedOption } = this.state;
      return (
        &lt;div className="container my-3"&gt;
          &lt;div className="row"&gt;
            &lt;div className="col-lg-4 col-md-6 col-sm-8"&gt;
              &lt;Select
              isMulti
              isSearchable
              placeholder={"catégories"}
              value={selectedOption}
              onChange={this.handleChange}
              options={options}
              /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default MealsFilters;
  </code></pre>
  
  <p>the <code>options</code> variable is the default one from the docs. I actually need to replace its values by each meal category available.
  To do so, as you can see, I need to create an array of objects with a <code>value</code> and a <code>label</code>. </p>
  
  <p>this component accesses meal categories through props called <code>meals</code> that are like so: </p>
  
  <pre><code>console.log(this.props.meals);
  
  =&gt; [{
       id: 0,
       name: spaghettis,
       category: italian,
       price: 5.99},
      {
       id: 1,
       name: hamburger,
       category: american,
       price: 7.99},
       {
        etc.
        }, {}]
  </code></pre>
  
  <p>How can I take advantage of <code>this.props.meals</code> to get my <code>options</code> array of objects ?</p>
  
  <p><strong>EDIT:</strong> multiple meals can have the same category, and I need each category to only appear once in the options.</p>