Basic React form submit refreshes entire page

Question

I'm trying to create an input form that stores information in a component's state variable, then outputs that variable on the screen. I read the docs on controlled components, and that's what I'm attempting here.

My main issue here is when I click submit, the correct text appears on the screen, but then the entire page refreshes and I'm not sure why. From what I've read online, refs appear to be a solution, but my understanding is that I can use either that, or controlled components.

class InputField extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        itemName: "",
        storedItemName: "",
    };
    this.handleNameChange = this.handleNameChange.bind(this);        
    this.afterSubmission = this.afterSubmission.bind(this);
}
handleNameChange(event) {        
    this.setState({
        itemName: event.target.value
    });
}
afterSubmission(event) {
    let name = this.state.itemName;
    this.setState ({
        storedItemName:this.state.itemName
    }, function() {
        alert(this.state.storedItemName); // Shows the right value!
    });
}
render() {
    return(
        <div>
            <form onSubmit = {this.afterSubmission}>
                <label> Item Name: 
                <input 
                    type = "text" 
                    name = "itemName" 
                    value = {this.state.itemName} 
                    onChange = {this.handleNameChange}
                /></label>                    
                <input type = "submit" value = "Submit" />
            </form>
            <div className = "itemList">
                <p>Hi</p>
                {this.state.storedItemName}
            </div>
        </div>
    );
}

developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault — vlad
– vlad, Commented May 5, 2018 at 19:26

Prakash Sharma · Accepted Answer · 2018-05-05 19:25:49Z

115

Just call event.preventDefault method to prevent default behavior of form

afterSubmission(event) {
    event.preventDefault();
    let name = this.state.itemName;
    this.setState ({
        storedItemName:this.state.itemName
    }, function() {
        alert(this.state.storedItemName); // Shows the right value!
    }
}

answered May 5, 2018 at 19:25

Prakash Sharma

16.7k6 gold badges34 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

fIwJlxSzApHEZIl Over a year ago

this is going to sound really dumb but my form kept setting the query string parameters of the page based on the form fields and it caused my page to reload onsubmit every time which of course cancelled the network request rendering the page useless. so thank you!

Victoria Over a year ago

Is there a more elegant way instead of using event.preventDefault()?

Akaisteph7 Over a year ago

@Victoria More elegant? There's nothing wrong with using event.preventDefault();.

Bhojendra Rauniyar · Accepted Answer · 2018-05-05 19:26:00Z

17

Prevent the default behaviour:

afterSubmission(event) {
    event.preventDefault();
    let name = this.state.itemName;
    this.setState ({
        storedItemName:this.state.itemName
    }, function() {
        alert(this.state.storedItemName); // Shows the right value!
    });
}

answered May 5, 2018 at 19:26

Bhojendra Rauniyar

86k36 gold badges179 silver badges240 bronze badges

Comments

Akash J · Accepted Answer · 2022-02-24 15:25:03Z

To prevent basic React form submit from refreshing the entire page, we call e.preventDefault. in the submit event handler.

For instance, we write:

import React from "react";

export default function App() {
  const onSubmit = (e) => {
    e.preventDefault();
    console.log("refresh prevented");
  };

  return (
    <div>
      <form onSubmit={onSubmit}>
        <button type="submit">submit</button>
      </form>
    </div>
  );
}

to create the onSubmit function that’s set as the value of the onSubmit prop.

In the function, we call e.preventDefault to prevent the default submission behavior, which is to do server side form submission which refreshes the whole page.

We have a submit button in the form to do the form submission.

Therefore, instead of seeing the page refresh when we click submit, we should see the 'refresh prevented' string logged in the console instead.

Sandeep Mukherjee · Accepted Answer · 2021-09-25 19:06:52Z

There are 3 ways you can do this:

1st WAY

By using event.preventDefault(); function

When we use onSubmit() event for form submission the default behaviour of this event is to refresh the browser and render a new html page.
To prevent this default behaviour of page refresh for onSubmit event we put event.preventDefault(); inside the function we are calling for onSubmit event.

InputField.js

class InputField extends React.Component {
    
        state = {
                  itemName: "",
                  storedItemName: "",
                }
    
        handleNameChange = (event) => { 
            const { name,value } = event.target;  
            //we can't write this.setState({name:value}) this will set name as the key we need value of the name which is itemName
            
            this.setState({
                [name] : value //itemName:"the text we will enter" 
            });
        }
        afterSubmission = (event) => {
            event.preventDefault();
            this.setState ({
                storedItemName:this.state.itemName
            }, function() {
                alert(this.state.storedItemName);
            });
        }
        render() {
            return(
                <div>
                    <form onSubmit = {this.afterSubmission}>
                        <label> Item Name: 
                        <input 
                            onChange = {this.handleNameChange}
                            type = "text" 
                            name = "itemName" 
                            value = {this.state.itemName} 
                        />
                        </label>                    
                        <input type = "submit" value = "Submit" />
                    </form>
                    <div className = "itemList">
                        <p>Hi</p>
                        {this.state.storedItemName}
                    </div>
                </div>
            );
        }
    }
    
    export default InputField;

2nd WAY

By removing onSubmit event from form element
Next is change the input type of submit to input type button and add an onClick event to it

InputField.js

class InputField extends React.Component {

    state = {
              itemName: "",
              storedItemName: "",
            }

    handleNameChange = (event) => { 
        console.log(this);    
        const { name,value } = event.target;  
        this.setState({
            [name] : value
        });
    }
    afterSubmission = () => {
        this.setState ({
            storedItemName:this.state.itemName
        }, function() {
            alert(this.state.storedItemName);
        });
    }
    render() {
        return(
            <div>
                <form>
                    <label> Item Name: 
                    <input 
                        onChange = {this.handleNameChange}
                        type = "text" 
                        name = "itemName" 
                        value = {this.state.itemName} 
                    />
                    </label>                    
                    <input 
                        type = "button" 
                        onClick={this.afterSubmission} 
                        value = "Submit" 
                    />
                </form>
                <div className = "itemList">
                    <p>Hi</p>
                    {this.state.storedItemName}
                </div>
            </div>
        );
    }
}

export default InputField;

3rd WAY

By using react form hook (https://www.react-hook-form.com/)

As per docs we have to install the npm module in our development server

npm install react-hook-form

InputField.js

import InputFieldForm from 'location specified';
    class InputField extends React.Component {
            
      render() {
        return(
              <div>
                  <InputFieldForm />
              </div>
              );
       }
    }
    export default InputField;

InputFieldForm.js

import React from "react";
import { useForm } from "react-hook-form";

const InputFieldForm = () =>{
    const onSubmit = (formData) =>{
        alert(JSON.stringify(formData));
        console.log(formData);
    } 

    const { register, handleSubmit } = useForm();
    return(
        <form onSubmit = {handleSubmit(onSubmit)}>
            <label> Item Name: 
            <input 
                {...register('itemName')}
                type = "text" 
                name = "itemName" 
            />
            </label>                    
            <input type = "submit" value = "Submit" />
        </form>
    )
}

export default InputFieldForm;

Akaisteph7 · Accepted Answer · 2024-01-19 17:55:32Z

-1

In my case, the <form> was not actually needed. Just removing it fixes this issue.

answered Jan 19, 2024 at 17:55

Akaisteph7

6,9222 gold badges38 silver badges53 bronze badges

1 Comment

Giorgi Gvimradze Over a year ago

the requirement is not to refresh when the form is submitted.

Collectives™ on Stack Overflow

Basic React form submit refreshes entire page

5 Answers 5

3 Comments

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

1 Comment

Linked

Related