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
  
}

Need a 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
  
}

Need a 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
}

Need a 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 */}
    
  );
}

Need a hint?

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