How to prevent basic React form submit from refreshing the entire page?

Estimated read time 2 min read

By default, when you submit a form in React, the entire page will refresh. However, you can prevent this behavior by calling the preventDefault() method on the event object that is passed to your submit handler function. This will prevent the default form submission behavior and allow you to handle the form data within your React component.

Here’s an example code snippet that demonstrates how to prevent basic React form submit from refreshing the entire page:

import React, { useState } from 'react';

function MyForm() {
  const [name, setName] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault();
    // Handle form data here
    console.log(`Form submitted with name: ${name}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

In this example, we define a functional component named “MyForm” that includes a form with an input field for the user’s name and a submit button. We use the useState hook to create state variables for the form data.

We define a function named handleSubmit that is called when the form is submitted. This function calls the preventDefault() method on the event object to prevent the default form submission behavior. We can then handle the form data within the function, such as logging it to the console.

In the JSX code, we bind the onSubmit event to the handleSubmit function. When the user submits the form, the handleSubmit function is called instead of the default form submission behavior.

Note that calling preventDefault() is not always necessary for handling form data in React. If you do not call preventDefault(), the form data will still be accessible through the event object, but the page will refresh and your React component may be unmounted and remounted.

You May Also Like

More From Author

+ There are no comments

Add yours

Leave a Reply