title: React reset select options when depending on the state
body: <p>I have a Select tag which allows the user to pick between 2-7 people,
  I also have a onChange event where it saves that number to the state.
  After that, it'll call the updateMenuSelect function and render x amount of select tags. The problem is that i want each option in the updateMenuSelect, to be Meal #X, not the previously selected item.</p>
  
  <pre><code> updateMenuSelect() {
      const menuSelector = [];
      for (let i = 0; i &lt; this.state.personCount; i++) {
        menuSelector.push(
          &lt;div&gt;
            &lt;select onChange={this.addMeal} name={i}&gt;
              &lt;option value={0} selected&gt;
                Meal #{i + 1}
              &lt;/option&gt;
              &lt;option value={15}&gt;Cheesy Stuffed BBQ Pork Burgers&lt;/option&gt;
              &lt;option value={17}&gt;Tex-Mex Cheese-Stuffed Burgers&lt;/option&gt;
              &lt;option value={20}&gt;Fiesta Chicken Tacos&lt;/option&gt;
              &lt;option value={24}&gt;Apricot Balsamic-Glazed Pork Tenderloin&lt;/option&gt;
              &lt;option value={15}&gt;Lemon Pepper Chicken Linguine&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
        );
      }
  
      return &lt;div&gt;{menuSelector}&lt;/div&gt;;
    }
  </code></pre>
  
  <p>For example, say i pick 3 people, it'll then render 3 selections with same options in each one. If for all 3, i pick "Fiesta Chicken Tacos" and then I update the amount of people to 6, it'll render 6 select tags, but with the first 3 still having "Fiesta Chicken Tacos" in it. How can i make it so the text in the options resets?
  I have a working react sandbox link <a href="https://codesandbox.io/s/8z20mnkk38" rel="nofollow noreferrer">https://codesandbox.io/s/8z20mnkk38</a></p>