How to prevent form submission with React?

To prevent form submission with React, you can use the preventDefault() method on the event object that is passed to your form submission 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 form submission with React:

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.