title: Dynamically create an array of inputs in React
body: <p>I'm still a novice at the React framework. I'm working on a project where I would like to allow the user to create select fields. I am currently using react-select to render the select fields or dropdowns. I need the values that they selected from the select input fields. The problem is the user needs to be able create multiple input fields. Each input field must have a unique key. I want to be able to retrieve the values as they as they choose them. </p>
  
  <p>What follows is what I have so far:</p>
  
  <pre><code> class OptionsComponent extends React.Component{
    constructor(props){
     super(props);
     this.state = {
      fields: [],
      parentArray: [],
      optionsArray: [],
      selectedOption:'',
  
     };
  
  this.handleSelect = this.handleSelect.bind(this); 
  }
  
   handleSelect = (event, index) =&gt; {
    console.log(event);
    console.log(optionsArray);
    console.log(selectedOption);
    const optionsArray = [...this.state.optionsArray];
    let selectedOption = event.label;
    optionsArray[index]= event.target.value;
  
    this.setState({
      optionsArray,
      selectedOption: event.label,
    })}
  
   render(){
  
  return(
  
    &lt;div className=""&gt;
      &lt;div className="optionsArea"&gt;
  
        { this.state.parentArray.map((el, index) =&gt;
          &lt;div key={index} className="selectDropdown "&gt;
              { this.state.optionsArray.map((el, index) =&gt; {
                return &lt;Select
                key={index}
                name="optionsSelect"
                className="userOptionSelectDropdown"
                placeholder="Select Variable"
                value={this.state.selectedOption}
                onChange={(event) =&gt; this.handleSelect(event)}
                onSelect={(event) =&gt; this.handleSelect(event)}
                options={this.state.fields.map((field, index) =&gt; {
                return {value: index, label: field.name;
              })} /&gt;
            })}
          &lt;/div&gt;
        )
      }
      &lt;/div&gt;
  
    &lt;/div&gt;
  
      );
     }
   }
  </code></pre>
  
  <p>I apologize in advance if this is a duplicate. I checked the similar questions and did a google search and I couldn't find anything. Right now when I use this code in my component, it doesn't render anything. I'm not really sure why. Thanks for your help.</p>