title: How to make dynamic state for multiple fields in react?
body: <pre><code>class Bills extends Component {
  constructor(props) {
      super(props)
      this.state = {
          productName: '',
          price: 0,
          quantity: 0,
          noOfProductsField: 0
      }
  }
  handleChange = name =&gt; event =&gt; {
      this.setState({
          [name]: event.target.value,
      });
  };
  
  createFields = () =&gt; {
          const { classes } = this.props;
          let children = []
          for (let i = 0; i &lt; this.state.noOfProductsField; i++) {
              children.push(
                  &lt;div&gt;
                      &lt;Select
                          className={classes.textField}
                           value = { this.state[i] }
                      onChange={this.handleChange('productName')}
                          displayEmpty
                          SelectProps={{
                              MenuProps: {
                                  className: classes.menu,
                              }
                          }}&gt;
                          &lt;MenuItem value="" disabled&gt;
                              Select Product
                             &lt;/MenuItem&gt;
                          {this.state.products.map((option, ind) =&gt; (
                              &lt;MenuItem key={ind} value={option.productName}&gt;
                                  {option.productName}
                              &lt;/MenuItem&gt;
                          ))}
                      &lt;/Select&gt;
                      &lt;TextField className={classes.textField} placeholder='Price' type='number' onChange={this.handleChange('price')} /&gt;
                      &lt;TextField className={classes.textField} placeholder='Quantity' type='number' onChange={this.handleChange('quantity')} /&gt;
                  &lt;/div&gt;
              )
          }
          return children
      }
  }
  </code></pre>
  
  <p>I Have this function which is creating 3 input fields in for loop</p>
  
  <ul>
  <li>productName</li>
  <li>price</li>
  <li>quantity</li>
  </ul>
  
  <p>For Example if loop is running 2 times it will create 6 fields like image below:</p>
  
  <p><img src="https://i.stack.imgur.com/pIvlp.png" alt="Click on this to see image"></p>
  
  <p>So now i want to manage state for all 6 fields differently 
  How can i do that ?</p>