title: loop through component based on number in select list - react js
body: <p>In my App component, I have a component which returns a select list with 15 option with the numbers 1 to 15. I also have an onChange on the select list which stores the selected number in the App state.</p>
  <p>My goal is that when the user selects a number from the select list It'll loop through that number and output a new component that just returns a text input (for example if 9 is chosen, automatically you see 9 input fields). Eventually, the value from each text input will be saved into an array in the App state.</p>
  <p>My App.js</p>
  <pre><code>render() {
  return (
    &lt;div className=&quot;App&quot;&gt;
      &lt;form onSubmit={this.handleSubmit}&gt;
        &lt;Location change={this.changeLocation} value={this.state.location} /&gt;
        &lt;Date changeDate={this.handleDate} value={this.state.date} /&gt;
        &lt;NumOfTunes
          handleChange={this.handleNumOfTunes}
          value={this.state.numberOfTunes}
        /&gt;
        &lt;button type=&quot;submit&quot;&gt;Generate SetList&lt;/button&gt;
        &lt;button type=&quot;button&quot; onClick={this.handleReset}&gt;
          Reset
        &lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  );
  </code></pre>
  <p>My select list component</p>
  <pre><code>const numOfTunes = props =&gt; {
    return (
      &lt;div&gt;
        &lt;select onChange={props.handleChange}&gt;
          &lt;option&gt;1&lt;/option&gt;
          &lt;option&gt;2&lt;/option&gt;
          &lt;option&gt;3&lt;/option&gt;
          &lt;option&gt;4&lt;/option&gt;
          &lt;option&gt;5&lt;/option&gt;
          &lt;option&gt;6&lt;/option&gt;
          &lt;option&gt;7&lt;/option&gt;
          &lt;option&gt;8&lt;/option&gt;
          &lt;option&gt;9&lt;/option&gt;
          &lt;option&gt;10&lt;/option&gt;
          &lt;option&gt;11&lt;/option&gt;
          &lt;option&gt;12&lt;/option&gt;
          &lt;option&gt;13&lt;/option&gt;
          &lt;option&gt;14&lt;/option&gt;
          &lt;option&gt;15&lt;/option&gt;
        &lt;/select&gt;
      &lt;/div&gt;
  </code></pre>