Handling Form Submissions with `onSubmit`

1. The onSubmit Event Handler

In a traditional HTML form, you might think about handling the click event on the submit button. However, React encourages a more robust approach: listening for the submit event on the <form> element itself. This is better because it also captures submissions triggered by pressing the "Enter" key in an input field, which is standard user behavior.

The onSubmit event handler is attached directly to the <form> tag.

The basic structure looks like this:

function MyForm() {
  const handleSubmit = (event) => {
    // ... logic to handle the submission
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* ...your form inputs... */}
      <button type="submit">Submit</button>
    </form>
  );
}

Notice we are passing the handleSubmit function reference, not calling it (handleSubmit() would be incorrect). React will invoke this function for us when the form is submitted.

2. Preventing the Default Behavior

If you were to implement the code above, you'd notice something strange: the page reloads the moment you submit the form. This is the default browser behavior for form submissions. In a single-page application (SPA) like the ones we build with React, a full-page reload is undesirable as it wipes out all client-side state.

To prevent this, we need to call the preventDefault() method on the event object that is automatically passed to our handler.

This short video from The Net Ninja clearly demonstrates how to attach the onSubmit handler and use event.preventDefault().

The React official documentation also provides a concise explanation of this concept.

The key takeaway is that the very first line inside your submission handler should almost always be event.preventDefault();.

3. Processing and Resetting the Form

Now that we've stopped the page from reloading, our handleSubmit function becomes the perfect place to work with our form data. The typical workflow inside this function is:

1. Call event.preventDefault().
2. (Optional but recommended) Validate the data. We'll cover this in our next lesson.
3. Access the state variables to gather the form data into a structured object.
4. Use the data (e.g., send it to an API, pass it to a parent component).
5. Reset the form fields to their initial state for a better user experience.

Let's see how to gather the data and then explore a complete example that includes resetting the form.

This next resource provides a complete, runnable example and a great explanation for why we need preventDefault() in modern web applications.

As you've seen, the handleSubmit function is the control center for your form's data. It's where you decide what happens after the user clicks "Submit".

Practice Exercise

Let's apply what you've learned by enhancing the PreferencesForm component from our last lesson. Your task is to implement a fully functional submission process, including resetting the form.

Goal: Modify the handleSubmit function to log the collected data and reset the form to its initial state.

Starter Code:
This is the solution from our previous lesson. Your work will be inside the handleSubmit function.

import { useState } from 'react';

const interestsData = ['AI', 'Coding', 'Music', 'Gaming', 'Audio'];

const initialInterestsState = interestsData.reduce((acc, interest) => {
  acc[interest] = false;
  return acc;
}, {});

// Define the initial state outside the component so we can reuse it for resetting
const initialPreferences = {
  theme: 'light',
  notificationFrequency: 'weekly',
  interests: initialInterestsState,
};

function PreferencesForm() {
  const [preferences, setPreferences] = useState(initialPreferences);

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    if (type === 'checkbox') {
      setPreferences(prev => ({
        ...prev,
        interests: {
          ...prev.interests,
          [name]: checked,
        },
      }));
    } else {
      setPreferences(prev => ({
        ...prev,
        [name]: value,
      }));
    }
  };

  const handleSubmit = (e) => {
    // 1. Prevent the default form submission behavior.
    
    // 2. Log the current `preferences` state object to the console
    //    with a descriptive message, e.g., "Form Submitted with:"
    console.log('Submitting Preferences:', preferences);

    // 3. Reset the form by setting the state back to `initialPreferences`.
    
    // 4. (Optional) Add an alert to notify the user that their
    //    preferences have been saved.
  };

  return (
    <form onSubmit={handleSubmit}>
      <h3>User Preferences</h3>
      {/* The rest of the form JSX remains the same... */}
      <fieldset>
        <legend>Theme</legend>
        <label>
          <input
            type="radio"
            name="theme"
            value="light"
            checked={preferences.theme === 'light'}
            onChange={handleChange}
          />
          Light
        </label>
        <label>
          <input
            type="radio"
            name="theme"
            value="dark"
            checked={preferences.theme === 'dark'}
            onChange={handleChange}
          />
          Dark
        </label>
      </fieldset>
      <label>
        Notification Frequency:
        <select
          name="notificationFrequency"
          value={preferences.notificationFrequency}
          onChange={handleChange}
        >
          <option value="none">None</option>
          <option value="daily">Daily</option>
          <option value="weekly">Weekly</option>
        </select>
      </label>
      <fieldset>
        <legend>Interests</legend>
        {interestsData.map((interest) => (
          <label key={interest}>
            <input
              type="checkbox"
              name={interest}
              checked={preferences.interests[interest]}
              onChange={handleChange}
            />
            {interest}
          </label>
        ))}
      </fieldset>
      <button type="submit">Save Preferences</button>
    </form>
  );
}

export default PreferencesForm;

// ... (imports and initial state setup are the same)

const initialPreferences = {
  theme: 'light',
  notificationFrequency: 'weekly',
  interests: interestsData.reduce((acc, interest) => ({ ...acc, [interest]: false }), {}),
};

function PreferencesForm() {
  const [preferences, setPreferences] = useState(initialPreferences);

  // ... (handleChange is the same)
  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    if (type === 'checkbox') {
      setPreferences(prev => ({
        ...prev,
        interests: {
          ...prev.interests,
          [name]: checked,
        },
      }));
    } else {
      setPreferences(prev => ({
        ...prev,
        [name]: value,
      }));
    }
  };

  const handleSubmit = (e) => {
    // 1. Prevent the default form submission behavior.
    e.preventDefault();
    
    // 2. Log the current `preferences` state object.
    console.log('Form Submitted with:', preferences);

    // 4. (Optional) Add an alert.
    alert('Preferences saved successfully!');

    // 3. Reset the form by setting the state back to `initialPreferences`.
    setPreferences(initialPreferences);
  };

  // ... (return with JSX is the same)
  return (
    <form onSubmit={handleSubmit}>
      <h3>User Preferences</h3>
      <fieldset>
        <legend>Theme</legend>
        <label>
          <input
            type="radio"
            name="theme"
            value="light"
            checked={preferences.theme === 'light'}
            onChange={handleChange}
          />
          Light
        </label>
        <label>
          <input
            type="radio"
            name="theme"
            value="dark"
            checked={preferences.theme === 'dark'}
            onChange={handleChange}
          />
          Dark
        </label>
      </fieldset>
      <label>
        Notification Frequency:
        <select
          name="notificationFrequency"
          value={preferences.notificationFrequency}
          onChange={handleChange}
        >
          <option value="none">None</option>
          <option value="daily">Daily</option>
          <option value="weekly">Weekly</option>
        </select>
      </label>
      <fieldset>
        <legend>Interests</legend>
        {interestsData.map((interest) => (
          <label key={interest}>
            <input
              type="checkbox"
              name={interest}
              checked={preferences.interests[interest]}
              onChange={handleChange}
            />
            {interest}
          </label>
        ))}
      </fieldset>
      <button type="submit">Save Preferences</button>
    </form>
  );
}

export default PreferencesForm;

Conclusion

Congratulations! You have now learned the complete lifecycle of a form in React: from capturing user input with controlled components to processing that data upon submission.

Key Takeaways:

• Handle form submissions with the onSubmit event handler on the <form> element, not the onClick handler on the button.
• Always call event.preventDefault() as the first step in your submit handler to prevent a full page reload.
• The handleSubmit function is the ideal place to access your form's state, process the data, and trigger further actions.
• Resetting the form's state after a successful submission is a key part of good user experience.

Next Up:

Our forms are functional, but they aren't very user-friendly if the input is incorrect. In our next lesson, we will address this by learning how to implement client-side form validation and display error messages conditionally. This will make our forms more robust and interactive.