title: How to deal with dynamically created controlled inputs in React?
body: <p>So I've been trying to create multiple dynamically created controlled inputs. But if I add an input pressing the <code>add ingredient</code> button the newly created input doesn't retain focus when I add text to it.<br>
  Weird thing(or clue) is the first input does retain focus after adding a new one, just the added ones don't work properly.</p>
  
  <p>Made my question in pseudo-code format for clarity:  </p>
  
  <pre><code>if(Not react way of creating multiple dynamically created controlled inputs) {  
   question = How to create multiple dynamically created controlled inputs in React way?  
  } else {  
   question = How to make the dynamically created input retain focus?  
  }
  </code></pre>
  
  <p>the code is(working jsfiddle snippet) :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Modal extends React.Component {
    constructor(props){
      super(props)
      this.state = {
        ingredients: [{ value: 'aap'}]
      }
    }
    addIngredient(e) {
      const old = this.state.ingredients
      const newState = [...old, {value: ''}]
      this.setState(
        {ingredients: newState}
      )
    }
    handleInput(e, i) {
      console.log(e.target.value)
     var newState = this.state.ingredients
     newState[i].value = e.target.value
     /*var promise = new Promise( (resolve, reject) =&gt; { 
       return this.setState({ ingredients: newState}) })
     promise.then( () =&gt; {return e.target.focus()} ) */
      this.setState( { ingredients: newState } )
      e.target.focus()
    }
  
    render() {
      const inputs = this.state.ingredients
      return (
        &lt;div className="modal"&gt;
          &lt;div className="modal-box"&gt;
            &lt;form&gt;
              &lt;h1&gt;Create your recipe&lt;/h1&gt;
              &lt;div&gt;
                &lt;label&gt;Recipe name:&lt;/label&gt;
                &lt;input type="text" /&gt;
              &lt;/div&gt;
              &lt;div&gt;
              &lt;label&gt;Ingredients:&lt;/label&gt;
              {inputs.map( (input, i) =&gt; (
                &lt;input value={input.value} onChange={(e) =&gt; this.handleInput(e, i)} key={`${i}-${i * Math.random()}`} /&gt;
              ))}
                &lt;button id="ingredient-button" type="button" onClick={(e) =&gt; this.addIngredient(e)}&gt;&lt;span&gt;+&lt;/span&gt;add ingredient&lt;/button&gt;
              &lt;/div&gt;
            &lt;/form&gt;
           
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  ReactDOM.render(&lt;Modal/&gt;, document.getElementById('root'))</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
  &lt;div id='root'&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>