title: React: How can I control a list of <input> with state?
body: <p>Here's a minimal working example of a component with a form of inputs created from a list, and one created from a single value:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  
  export default class App extends React.Component {
    constructor(props) {
      super(props);
    }
  
    state = {
      value: 'single value',
      values: ['one', 'two'],
    }
  
    render() {
      let test = this.state.values.map( (v, i) =&gt; {
        return &lt;input
          key={ v }
          value={ v }
          onChange={ (e) =&gt; {
            let values = this.state.values;
            values[i] = e.target.value;
            this.setState({ values });
          } }
        /&gt;;
      } )
  
      return &lt;div&gt;
        &lt;form&gt;
          { test }
        &lt;/form&gt;
        &lt;form&gt;
          &lt;input
            value={ this.state.value }
            onChange={ (e) =&gt; this.setState({ value: e.target.value }) }
          /&gt;
        &lt;/form&gt;
      &lt;/div&gt;;
    }
  }
  </code></pre>
  
  <p>Which produces this:</p>
  
  <p><a href="https://i.stack.imgur.com/dyzt4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dyzt4.png" alt="enter image description here"></a></p>
  
  <p>When the user edits the third input field ('single value'), everything is fine. The user types something, the state updates, everyone is happy.</p>
  
  <p>When the user edits either of the first two input fields however, the cursor loses focus immediately after the state is updated. To edit this field, the user must click on the field after any letter has been put in.</p>
  
  <p>How do I solve this? Is there a way to prevent the component from blurring the <code>&lt;input&gt;</code>, or is there a better way to solve this?</p>
  
  <p>I don't know how to record my screen and make a GIF from it. If you did not understand what I mean I suggest you create a React app with <code>npx create-react-app my-app</code> and edit <code>my-app/src/App.js</code> to my code example.</p>