REACT / LESSON 08

Building a Form.

Put your React skills together by building a complete form with controlled inputs, validation, submission, and error handling

Written by Andrew Lee JenkinsPublished Oct 5, 202614 min readFree lesson

Forms are EVERYWHERE in web apps. Sign up pages, search bars, checkout flows, settings panels... and every contact form a business owner has ever relied on for leads. Building a good one in React pulls together everything you've learned so far. State keeps track of what people type, events respond to what they do, conditional rendering shows the errors, and an async event handler takes care of sending it all off.

I'll be straight with you. Courses don't really teach you anything, they just clear out the noise so you can go learn by doing. This lesson is where the doing starts.

So let's build a complete contact form, one step at a time.

Step 1: Controlled Inputs

A controlled input is one where React is in charge of the value. You keep the value in state and update it with onChange.

Example

import { useState } from 'react';

function ContactForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');

  return (
    <form>
      <label>
        Name
        <input
          type="text"
          value={name}
          onChange={e => setName(e.target.value)}
        />
      </label>

      <label>
        Email
        <input
          type="email"
          value={email}
          onChange={e => setEmail(e.target.value)}
        />
      </label>

      <label>
        Message
        <textarea
          value={message}
          onChange={e => setMessage(e.target.value)}
        />
      </label>

      <button type="submit">Send</button>
    </form>
  );
}

Since React controls the value, you've got full power over it. You can validate on every keystroke, format text as somebody types, or block certain characters entirely.

Step 2: Form State with One Object

Once a form has a bunch of fields, keeping all the values in one state object keeps things organized.

Example

function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });

  function handleChange(event) {
    const { name, value } = event.target;
    setFormData(prev => ({
      ...prev,
      [name]: value
    }));
  }

  return (
    <form>
      <input name="name" value={formData.name} onChange={handleChange} />
      <input name="email" value={formData.email} onChange={handleChange} />
      <textarea name="message" value={formData.message} onChange={handleChange} />
    </form>
  );
}

The [name]: value computed property updates whichever field changed. One handler covers every input.

Step 3: Validation

Good forms check what people type and show clear error messages when something's off. Validating when somebody leaves a field (that's "on blur") gives the best experience.

Example

import { useRef, useState } from 'react';

function ContactForm() {
  const [formData, setFormData] = useState({ name: '', email: '', message: '' });
  const [errors, setErrors] = useState({});
  const [touched, setTouched] = useState({});
  const [submitted, setSubmitted] = useState(false);
  const nameRef = useRef(null);
  const emailRef = useRef(null);
  const messageRef = useRef(null);
  const refs = { name: nameRef, email: emailRef, message: messageRef };
  const fields = ['name', 'email', 'message'];

  function validate(field, value) {
    if (field === 'name' && !value.trim()) return 'Name is required';
    if (field === 'email' && !value.includes('@')) return 'Enter a valid email';
    if (field === 'message' && value.length < 10) return 'Write at least 10 characters';
    return '';
  }

  function handleBlur(event) {
    const { name, value } = event.target;
    setTouched(prev => ({ ...prev, [name]: true }));
    setErrors(prev => ({ ...prev, [name]: validate(name, value) }));
  }

  function handleChange(event) {
    const { name, value } = event.target;
    setFormData(prev => ({ ...prev, [name]: value }));
    if (touched[name] || submitted) {
      setErrors(prev => ({ ...prev, [name]: validate(name, value) }));
    }
  }

  function handleSubmit(event) {
    event.preventDefault();
    setSubmitted(true);
    const nextErrors = Object.fromEntries(
      fields.map(field => [field, validate(field, formData[field])])
    );
    setErrors(nextErrors);
    const firstInvalid = fields.find(field => nextErrors[field]);
    if (firstInvalid) {
      refs[firstInvalid].current?.focus();
      return;
    }
    // Send valid formData to your API here.
  }

  return (
    <form onSubmit={handleSubmit} noValidate>
      {fields.map(field => {
        const showError = (touched[field] || submitted) && errors[field];
        const inputProps = {
          ref: refs[field], name: field, id: field,
          value: formData[field], onChange: handleChange, onBlur: handleBlur,
          'aria-invalid': Boolean(showError),
          'aria-describedby': showError ? `${field}-error` : undefined
        };
        return (
          <div key={field}>
            <label htmlFor={field}>{field}</label>
            {field === 'message'
              ? <textarea {...inputProps} />
              : <input {...inputProps} type={field === 'email' ? 'email' : 'text'} />}
            {showError && <p id={`${field}-error`}>{errors[field]}</p>}
          </div>
        );
      })}
      <button type="submit">Send</button>
    </form>
  );
}

Step 1. Track Touched Fields

Before submission, show errors only for fields the person has touched. After submission, show errors for every invalid field so the person knows what to fix.

Step 2. Validate on Blur

When someone leaves a field, run validation and save any error message.

Step 3. Clear Errors on Change

As soon as somebody starts fixing a field, re-validate right away so the error disappears the moment the input is good.

Step 4: Handling Submission

Stop the default form submit (which reloads the page), validate every field, and send the data off to your API.

Example

function ContactForm() {
  const [formData, setFormData] = useState({ name: '', email: '', message: '' });
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [submitStatus, setSubmitStatus] = useState(null); // 'success' | 'error' | null

  async function handleSubmit(event) {
    event.preventDefault();

    // Validate all fields before submitting
    const newErrors = {
      name: validate('name', formData.name),
      email: validate('email', formData.email),
      message: validate('message', formData.message),
    };
    setErrors(newErrors);

    // If any errors exist, don't submit
    if (Object.values(newErrors).some(error => error !== '')) {
      return;
    }

    setIsSubmitting(true);
    try {
      const response = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(formData),
      });

      if (!response.ok) throw new Error('Failed to send');

      setSubmitStatus('success');
      setFormData({ name: '', email: '', message: '' }); // Reset form
    } catch (err) {
      setSubmitStatus('error');
    } finally {
      setIsSubmitting(false);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      {/* ...form fields... */}
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Sending...' : 'Send Message'}
      </button>
    </form>
  );
}

Step 5: Showing Success and Error States

Once the API responds, tell the person what happened. Use the submitStatus state to conditionally render a success message (with an option to send another one) or an inline error banner above the form. An early return for the success case swaps the whole form out for a confirmation message.

The Complete Form Pattern

Here's a rundown of the pieces every well-built React form needs.

Piece	What It Does	React Feature
Controlled inputs	Track input values in real time	`useState` + `onChange`
Validation	Check if input is valid	Custom function + `onBlur`
Error display	Show what's wrong	Conditional rendering
Loading state	Prevent double-submit, show spinner	`useState` (isSubmitting)
Submit handler	Send data to API	`onSubmit` + `preventDefault`
Success/error feedback	Tell user what happened	Conditional rendering

Tips for Better Forms

Label all inputs - Use <label> elements or aria-label so the form is accessible
Use proper input types - type="email", type="password", type="number" pull up the right keyboard on mobile
Show character counts - For textareas with limits, show {message.length}/500
Auto-focus the first field - Put autoFocus on the first input for a polished feel
Reset carefully - Clear the form only after a confirmed success, never in the middle of submitting

TL;DR

Controlled inputs keep values in state and update with onChange
Use a single state object with computed property names for multi-field forms
Validate on blur for the best experience (not too early and not too late)
Prevent default on form submit so the page doesn't reload
Disable the submit button while submitting so nothing gets sent twice
Show clear feedback for success, errors and loading states

What's Next?

You just built a full React form from scratch using every core concept together. Not bad at all. In the final lesson you'll learn how to use Claude Code to build React apps, letting AI scaffold projects, generate components and help you debug a whole lot faster...

Loading the lesson…

Loading activities…