CODEWITHSUNDEEP
formsreactjsstate
Mike Weiss
Mike Weiss

Reputation: 377

React state keeps resetting on form submittal. How to persist state?

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.

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 => ({
        page: prevState.page + 1
    }))
}

render() {
    if(this.state.page < this.state.questions.length){
        return (
            <form onSubmit={ this.updatePage }>
                <div className="setup">
                    <div className="setupInterior">
                        <h1>{ this.state.questions[this.state.page].message }</h1>
                        <input type={ this.state.questions[this.state.page].type } name={ this.state.questions[this.state.page].name }></input>
                    </div>
                </div>
            </form>
        )
    } else {
        return null
    }
}

}

Upvotes: 3

Views: 3365

Answers (2)

Zachary Raineri
Zachary Raineri

Reputation: 146

This doesn't solve this situation, but I'm going to add it since it solved my question that brought me here

I had a button within a form to complete a non-submission action which kept resetting react.

Remember to add type="button" to avoid the form submitting on button clicks

<button type="button" onClick={(e) => {handleClick(e)}}>Expand Options</button>

Upvotes: 3

Anthony
Anthony

Reputation: 6482

You need to preventDefault() on the event passed to the onSubmit function to avoid the default web form submission, as you are getting a page reload.

updatePage(event) {
    event.preventDefault();

    this.setState(prevState => ({
      page: prevState.page + 1
    }))
}

Upvotes: 8

Related Questions