title: React.js set state on mapped forms
body: <p>I'm a react newbie and I'm taking on a form that looks as follows: on the left side are the actual input fields and on the right there's a live preview of what the user is typing. </p>
  
  <p>There are 2 input fields for the form name and what it's for and (that's the tricky part) a button that adds questions, each has 2 input fields for again a name and description.</p>
  
  <p>I have 2 functions that manipulate the state, one that adds an object of empty strings for title and description to the questions array. Looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>addQuestion = (event)=&gt;{
      event.preventDefault();
      this.setState((prevState) =&gt; ({
        questions: [...prevState.questions, {questionTitle: "", questionDescription: ""}]
      }));
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The other one takes the user input value and sets it as the state for the title and description. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>setQuestion(question){
      this.setState((prevState) =&gt; ({
        questions: [{questionTitle: this.questionTitle.value, questionDescription: this.questionDescription.value}]
      }));
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now when I add more than 1 question and try to type into the input fields, those questions disappear, as the state gets set only for one object in the questions array. If I use a spread operator, that won't work because it's a live form, so the second function is called on change, therefore each keystroke equals a new question.</p>
  
  <p>Here's the piece of code that maps over the state on change of the input fields:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const QuizQuestion = props=&gt;{
    return(
      &lt;div className="quiz-question"&gt;
        &lt;h2 className="question-title"&gt;{props.questionTitle}&lt;/h2&gt;
        &lt;p className="question-description"&gt;{props.questionDescription}&lt;/p&gt;
      &lt;/div&gt;
    )
  }
  
  
  /*this is located in the render method*/
   {this.state.questions.map((element, i)=&gt;(
              &lt;QuizQuestion
              key={i}
              item={element}
              questionTitle={element.questionTitle}
              questionDescription={element.questionDescription}
              /&gt;
            ))}</code></pre>
  </div>
  </div>
  </p>
  
  <p>What am I doing wrong?
  Thanks in advance for your help!</p>