title: React form - Field is automatically unselected when value changes
body: <p>I'm a total beginner in React, and am trying to build my first form. </p>
  
  <p>I fetch the questions asked in said form using an API, and once the form submitted, I would like to create an answer object through this same API. </p>
  
  <p>The problem is that everything seems to work just fine (questions render ok, answer object is updated in state), but everytime the value of a field change, I have to re-select the field to keep typing. Basically, it's like <strong>I'm auto-clicked away from the field when the value changes</strong>.</p>
  
  <p>Here's what happens :</p>
  
  <p><a href="https://i.stack.imgur.com/xfcLr.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xfcLr.gif" alt="enter image description here"></a></p>
  
  <p>And here's a snippet of (probably) the offending code :</p>
  
  <pre><code>class Form extends React.Component {
      constructor(props) {
          super(props);
          {/* Questions are filled on page load, answers is what I'm working with */}
          this.state = { questions: [], answers: [] }; 
          this.handleChange = this.handleChange.bind(this);
      }
  
  
      // This is where the magic is supposed to happen
      handleChange(event) {
          let key = event.target.id,
              value = event.target.value;
  
          {/* Here, my goal is to build an object with questions ids as keys and values of fields as key values. */}
  
          this.setState(prevState =&gt; {
              let copy = Object.assign({}, prevState.answers);
              copy[key] = value;
              return {  answers: copy };
          })
  
      }
  
      render() {
          const { questions } = this.state;
  
          const TextareaInput = (fieldId) =&gt; (
              &lt;div&gt;
                  &lt;textarea name={ fieldId.fieldId } value={this.state.answers[fieldId.fieldId]} id={ fieldId.fieldId } onChange={this.handleChange}  &gt;&lt;/textarea&gt;
              &lt;/div&gt;
          );
  
          const TextInput = (fieldId) =&gt;(
              &lt;div&gt;
                  &lt;input type='text' name={ fieldId.fieldId } value={this.state.answers[fieldId.fieldId]} id={ fieldId.fieldId } onChange={this.handleChange} /&gt;
              &lt;/div&gt;
          );
  
          const allQuestions =  (
              questions.map((q, key) =&gt;
                  &lt;div key={q.id} className='question'&gt;
                      &lt;label htmlFor={ q.field_id } className={ q.required ? 'required' : '' } dangerouslySetInnerHTML={{__html: q.question}}&gt;&lt;/label&gt;
  
                      {q.field_type == 'text' ? &lt;TextInput fieldId={q.field_id}/&gt; : &lt;TextareaInput fieldId={q.field_id}/&gt;}
                  &lt;/div&gt;
              )
          )
  
          return (
              &lt;form&gt;
                  { allQuestions }
              &lt;/form&gt;
          )
      }
  
  }
  export default Form;
  </code></pre>
  
  <p>(<a href="https://pastebin.com/C4GHnXrK" rel="nofollow noreferrer">Full component on pastebin</a>)</p>
  
  <p>I think the problem comes from my handleChange function, but I'm not sure what could be causing this. I tried adding some stuffs and moving things around a little without any luck...</p>