title: How to display dynamic rows in React Material UI form with dropdowns
body: <p>I am fairly new to react JS and material UI both and working on a small project with a requirement to display a material UI form having dynamically added rows containing a dropdown and a text field. I have been already able to reach a position where the dynamic fields contain two text boxes and on submit I get individual rows data as JSOn indexed by the row number.</p>
  
  <p>Now I want the form to have a select field as well in a way that I can capture the rows data in the output JSON when submit is pressed.</p>
  
  <p>I tried replacing the text field with react material Select component as well as the AutoSuggest but somehow can not make them work both in terms of rendering and then I am not even sure how to capture the data.</p>
  
  <p>Also as a quick note, it is a stepper form...</p>
  
  <p>Existing working code with text fields that can be dynamically added or removed:</p>
  
  <pre><code>&lt;MaterialUIForm activeStep={activeStep} onFieldValidation={this.updateErrorSteps} onSubmit={this.submit}&gt;
            {activeStep === 0 &amp;&amp;
              &lt;React.Fragment&gt;
              &lt;h6 style={{padding:"2px", textAlign:"left"}}&gt;Name Information&lt;/h6&gt;
                &lt;div style={{width:"100%", align:"right"}}&gt;
                &lt;Button variant="contained" onClick={this.clickNext}&gt;Next&lt;/Button&gt;
                &lt;/div&gt;
              &lt;/React.Fragment&gt;
            }
  
            {activeStep === 1 &amp;&amp;
              &lt;React.Fragment&gt;
              &lt;h6 style={{padding:"2px", textAlign:"left"}}&gt;Attribs&lt;/h6&gt;
                {this.state.rows.map((row, i) =&gt; (
                  &lt;Fragment key={row._id}&gt;
                    &lt;TextField label="Label" name={`rows[${i}][label]`} value="" className={classes.sanKeyTF} /&gt;
                    &lt;TextField label="Value" name={`rows[${i}][value]`} value="" className={classes.sanValueTF} /&gt;
                    { this.state.rows.length &gt; 1 &amp;&amp;
                      &lt;Button variant="contained" onClick={()=&gt; this.removeRow(i)}
                      deletefieldrow={`rows[${i}]`}&gt;Remove&lt;/Button&gt;
                    }
                  &lt;/Fragment&gt;
                ))}
                &lt;div style={{width:"100%", textAlign:"left"}}&gt;
                  &lt;Button variant="contained" onClick={this.addRow}&gt;Add Attrib&lt;/Button&gt;
                &lt;/div&gt;
                &lt;div style={{width:"100%", textAlign:"right"}}&gt;
                  &lt;Button variant="contained" onClick={this.clickBack}&gt;Back&lt;/Button&gt;
                  &amp;nbsp;
                  &lt;Button variant="contained" type="submit"&gt;Submit&lt;/Button&gt;
                &lt;/div&gt;
              &lt;/React.Fragment&gt;
            }
  &lt;/MaterialUIForm&gt;
  </code></pre>
  
  <pre><code>state = {
      rows: [{ _id: _.uniqueId() }],
      activeStep: 0,
      errorSteps: [],
    }
  
    addRow = () =&gt; {
      const { rows } = this.state
      rows.push({ _id: _.uniqueId() })
      this.setState({ rows })
    }
  
    removeRow = (index) =&gt; {
      const { rows } = this.state
      if (rows.length &gt; 1) {
        rows.splice(index, 1)
        this.setState({ rows })
      }
    }
  
  submit = (values, pristineValues) =&gt; {
      // get all values and pristineValues on form submission
      const parsedValues = formData.toObj(values)
      console.log(parsedValues);
    }
  </code></pre>
  
  <p>Autosuggest code I am trying to add</p>
  
  <pre><code>&lt;Autosuggest
                      {...autosuggestProps}
                      inputProps={{
                        classes,
                        placeholder: 'Search a country (start with a)',
                        value: this.state.single,
                        onChange: this.handleChange('single'),
                      }}
                      theme={{
                        container: classes.container,
                        suggestionsContainerOpen: classes.suggestionsContainerOpen,
                        suggestionsList: classes.suggestionsList,
                        suggestion: classes.suggestion,
                      }}
                      renderSuggestionsContainer={options =&gt; (
                        &lt;Paper {...options.containerProps} square&gt;
                          {options.children}
                        &lt;/Paper&gt;
                      )}
                    /&gt;
  </code></pre>
  
  <p>Getting errors and in code shared above:</p>
  
  <pre><code>./src/components/CreateCertificate.js
    Line 158:  'Autosuggest' is not defined       react/jsx-no-undef
    Line 159:  'autosuggestProps' is not defined  no-undef
  
  Search for the keywords to learn more about each error.
  </code></pre>
  
  <p>Any suggestions what could be a good way ahead for this solution will be really helpful.
  If any further details are needed, would be happy to furnish.</p>