title: React state keeps resetting on form submittal. How to persist state?
body: <p>I'm trying to teach myself React and have been struggling with this all night. What the following code is intended to do is iterate over my questions array and dynamically update my render to replace the message, type and name of each of my form elements. However what keeps happening, and what I can't find a way around, is that on each submittal the page updates for a split second to the next object in the questions array but then refreshes and the form resets to the page: 0 state asking 'how many teams?' (instead of incrementing to the 'how many rounds?' question as intended). I tried moving the state up to the parent of the form but that ended up just kicking the can down the road and the same problem occurred.</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  
  export class Form extends React.Component {
  constructor(props) {
      super(props);
  
      this.state = {
          questions : [
              {   message: 'How many teams?',
                  type: 'number',
                  name: 'numberOfTeams'
              },
              {   message: 'How many rounds?',
                  type: 'number',
                  name: 'numberOfRounds'
              },
              {   message: 'How long for each round?',
                  type: 'number',
                  name: 'lengthOfRounds'
              },
              {   message: 'What is your team name?',
                  type: 'text',
                  name: 'teamName'
              }
          ],
          page : 0
      }
  
      this.updatePage = this.updatePage.bind(this);
  }
  updatePage() {
      this.setState(prevState =&gt; ({
          page: prevState.page + 1
      }))
  }
  
  render() {
      if(this.state.page &lt; this.state.questions.length){
          return (
              &lt;form onSubmit={ this.updatePage }&gt;
                  &lt;div className="setup"&gt;
                      &lt;div className="setupInterior"&gt;
                          &lt;h1&gt;{ this.state.questions[this.state.page].message }&lt;/h1&gt;
                          &lt;input type={ this.state.questions[this.state.page].type } name={ this.state.questions[this.state.page].name }&gt;&lt;/input&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          )
      } else {
          return null
      }
  }
  </code></pre>
  
  <p>}</p>