To build robust forms in React, you start by creating a controlled form. A controlled form is one where the form data is managed by React state, rather than letting the browser handle it. This approach gives you full control over the form's data and behavior, which is especially useful when you want to validate inputs or perform side effects on user interaction.

Begin by importing useState from React. You'll use this hook to store the form's data. Suppose you want a simple form with two fields: a user's name and email. You define a state object to hold these values, and update them as the user types. This ensures that the values displayed in the input fields always reflect the state.

You set up your form with input elements for each field. Each input's value is tied to the corresponding property in your state object, and you provide an onChange handler to update that state. This handler is called every time the user types into an input, allowing you to capture and store the latest input value in your state.

When the form is submitted, you want to prevent the default browser behavior, which would reload the page. Instead, you handle the form submission with a function that can access the current state and perform any necessary actions, such as validation or sending data to a server. At this stage, focus on capturing the data and preparing for validation, which will come in later chapters.

Here's a walkthrough of how you might implement this:

import React, { useState } from "react";

function SimpleForm() {
  const [formData, setFormData] = useState({
    name: "",
    email: ""
  });

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

  function handleSubmit(event) {
    event.preventDefault();
    // At this point, formData contains the current values
    // Prepare for validation or submission here
    console.log(formData);
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>
          Name:
          <input
            name="name"
            value={formData.name}
            onChange={handleChange}
            type="text"
          />
        </label>
      </div>
      <div>
        <label>
          Email:
          <input
            name="email"
            value={formData.email}
            onChange={handleChange}
            type="email"
          />
        </label>
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

In this example, the formData state holds the values for both the name and email fields. The handleChange function updates the correct field in the state whenever the user types. The handleSubmit function prevents the page from reloading and gives you access to the latest form data for validation or further processing.

Managing form data in this way is called using controlled components. This pattern is essential for integrating validation libraries like Zod, as it lets you validate data before submission and provide immediate feedback to users.

Handling user input and form submission in React is straightforward once you understand the flow. Each input field is linked to a piece of state, and the onChange handler ensures that every keystroke updates the state. This keeps your form data always in sync with what the user sees on the screen.

When the user submits the form, the onSubmit event triggers your submission handler. By calling event.preventDefault(), you stop the browser from performing its default action, giving you the chance to process the data however you need. This is the point where you can introduce validation logic, send data to a backend, or update your UI based on the form's content.

By keeping all form data in React state, you can easily access, update, and validate it as needed. This controlled approach is foundational for implementing more advanced validation and error handling strategies in your forms.