Form submission handling in React - Mini Project: Build & Apply

Form submission handling

📖 Scenario: You are building a simple contact form on a website. Visitors can type their name and email, then submit the form.

🎯 Goal: Create a React functional component that shows a form with two input fields: one for name and one for email. When the user submits the form, the component should save the entered data in state and clear the inputs.

📋 What You'll Learn

Use React functional components with hooks

Create controlled input fields for name and email

Handle form submission with a function called handleSubmit

Store submitted data in a state variable called submittedData

Clear the input fields after submission

💡 Why This Matters

🌍 Real World

Forms are everywhere on websites and apps. Handling form submission correctly is essential for collecting user input like contact info, feedback, or orders.

💼 Career

Knowing how to build and manage forms in React is a key skill for frontend developers. It shows you can handle user input, state, and events effectively.

1

Set up initial state for form inputs

Create a React functional component called ContactForm. Inside it, use useState to create two state variables: name and email, both initially empty strings.

React

import React, { useState } from 'react';

function ContactForm() {
  // Create state variables name and email with useState
  
}

Hint

Use const [name, setName] = useState('') and similarly for email.

2

Add a state variable for submitted data

Inside the ContactForm component, create a state variable called submittedData using useState. It should start as null.

React

import React, { useState } from 'react';

function ContactForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  // Create submittedData state variable starting as null
  
}

Hint

Use const [submittedData, setSubmittedData] = useState(null) to hold the form submission.

3

Create the form with controlled inputs and submit handler

Inside the ContactForm component, return a form element. Add two controlled input fields: one for name and one for email. Use value and onChange to link them to state. Add a handleSubmit function that prevents default submission, sets submittedData to an object with name and email, and clears the name and email states. Attach handleSubmit to the form's onSubmit event.

React

import React, { useState } from 'react';

function ContactForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [submittedData, setSubmittedData] = useState(null);

  // Create handleSubmit function
  // Return a form with controlled inputs for name and email
}

Hint

Remember to prevent the default form submission. Use controlled inputs with value and onChange. Clear inputs after submission.

4

Display submitted data below the form

Below the form in the ContactForm component, add a conditional rendering that shows a div with the text Name: {submittedData.name} and Email: {submittedData.email} only if submittedData is not null.

React

import React, { useState } from 'react';

function ContactForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [submittedData, setSubmittedData] = useState(null);

  function handleSubmit(event) {
    event.preventDefault();
    setSubmittedData({ name, email });
    setName('');
    setEmail('');
  }

  return (
    
      
        Name:
         setName(e.target.value)}
          required
          aria-required="true"
        />
        Email:
         setEmail(e.target.value)}
          required
          aria-required="true"
        />
        Submit
      
      {/* Add conditional display of submittedData here */}
    
  );
}

Hint

Use {submittedData && ( ... )} to show the data only if it exists. Use paragraphs to show name and email.

Practice

1. What does event.preventDefault() do in a React form submission handler?

easy

A. It automatically submits the form data to the server.

B. It stops the browser from reloading the page when the form is submitted.

C. It clears all the input fields in the form.

D. It resets the component's state to initial values.

Solution

1. Step 1: Understand default form behavior

   By default, submitting a form reloads the page to send data to the server.

2. Step 2: Role of event.preventDefault()

   This method stops the default reload so you can handle submission in React code.

3. Final Answer:

   It stops the browser from reloading the page when the form is submitted. -> Option B

4. Quick Check:

   event.preventDefault() = stops reload [OK]

Hint: Remember: preventDefault stops page reload on submit [OK]

Common Mistakes:

• Thinking preventDefault clears inputs
• Assuming preventDefault submits data automatically
• Confusing preventDefault with resetting state

2. Which of the following is the correct way to attach a submit handler to a form in React?

easy

A.

B.

C.

D.

Solution

1. Step 1: Check React event naming conventions

   React uses camelCase for event handlers, so it must be onSubmit.

2. Step 2: Validate JSX syntax

   Attributes are case-sensitive; onsubmit is incorrect, must be onSubmit.

3. Final Answer:

   <form onSubmit={handleSubmit}> -> Option A

4. Quick Check:

   React event handlers use camelCase = onSubmit [OK]

Hint: React events use camelCase like onSubmit, not lowercase [OK]

Common Mistakes:

• Using lowercase onsubmit instead of onSubmit
• Using non-existent attributes like submit or onsubmitHandler
• Forgetting curly braces around handler function

3. What will be logged to the console when the form below is submitted?

function MyForm() {
  const [name, setName] = React.useState('');
  function handleSubmit(event) {
    event.preventDefault();
    console.log(name);
  }
  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={e => setName(e.target.value)} />
      <button type="submit">Send</button>
    </form>
  );
}

medium

A. The current value typed in the input field.

B. An empty string always.

C. Undefined because name is not set.

D. The string 'Send' from the button.

Solution

1. Step 1: Understand controlled input behavior

   The input's value is linked to state variable name, updated on every change.

2. Step 2: What happens on submit?

   On submit, handleSubmit logs the current name state, which matches input content.

3. Final Answer:

   The current value typed in the input field. -> Option A

4. Quick Check:

   Controlled input state logs current input [OK]

Hint: Controlled inputs keep state updated; submit logs that state [OK]

Common Mistakes:

• Assuming name is always empty on submit
• Confusing button text with input value
• Forgetting to call event.preventDefault()

4. Identify the error in this React form submission code:

function Form() {
  const [email, setEmail] = React.useState('');
  function handleSubmit() {
    event.preventDefault();
    alert(email);
  }
  return (
    <form onSubmit={handleSubmit}>
      <input value={email} onChange={e => setEmail(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
}

medium

A. Button type should be 'button' not 'submit'.

B. Using alert instead of console.log is not allowed.

C. Input value should not be controlled by state.

D. Missing event parameter in handleSubmit function.

Solution

1. Step 1: Check handleSubmit parameters

   The function uses event.preventDefault() but does not receive event as a parameter.

2. Step 2: Why is this a problem?

   Without event parameter, event is undefined, causing a runtime error.

3. Final Answer:

   Missing event parameter in handleSubmit function. -> Option D

4. Quick Check:

   Event must be passed to handler to call preventDefault [OK]

Hint: Always include event parameter to use event.preventDefault() [OK]

Common Mistakes:

• Forgetting to add event parameter
• Thinking alert is disallowed
• Confusing button types for form submission

5. You want to submit a form and then clear the input fields after submission. Which code snippet correctly handles this in React?

function ContactForm() {
  const [message, setMessage] = React.useState('');
  function handleSubmit(event) {
    event.preventDefault();
    console.log(message);
    // What goes here?
  }
  return (
    <form onSubmit={handleSubmit}>
      <textarea value={message} onChange={e => setMessage(e.target.value)} />
      <button type="submit">Send</button>
    </form>
  );
}

hard

A. message = ''; // Directly assign to state variable

B. event.target.reset(); // Reset form DOM directly

C. setMessage(''); // Reset state to empty string

D. window.location.reload(); // Reload page to clear form

Solution

1. Step 1: Understand controlled components

   The textarea's value is controlled by React state message, so clearing input means resetting this state.

2. Step 2: Why setMessage('') works best

   Calling setMessage('') updates state to empty string, clearing the textarea in UI.

3. Final Answer:

   setMessage(''); // Reset state to empty string -> Option C

4. Quick Check:

   Reset controlled input by updating state [OK]

Hint: Clear controlled inputs by setting state to empty string [OK]

Common Mistakes:

• Trying to assign directly to state variable
• Using event.target.reset() which doesn't update React state
• Reloading page instead of clearing state