Coding Glossary

HTML CSS JavaScript Python Swift TypeScript SQL React Programming Concepts

REACT

React Form: Syntax, Usage, and Examples

A React form allows users to input and submit data while React handles state updates efficiently. Forms in React work similarly to regular HTML forms but require controlled components for handling user input.

How to Use a React Form

A React form consists of input fields, event handlers, and a submission function. Controlled components ensure React manages the form’s state.

Learn React on Mimo

CAREER PATHFull-Stack Developer

Become a full-stack developer. Learn HTML, CSS, JavaScript, and React as well as NodeJS, Express, and SQL

Beginner friendly

COURSEReact

Build modern web apps with React. Learn components, hooks, state management, and React patterns

Intermediate

Creating a Basic React Form

This example shows a simple React form with a controlled input field and a submit button.

JSX

Open in Mimo

import { useState } from "react";

function SimpleForm() {
  const [name, setName] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Hello, ${name}!`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

Here, useState stores the input value, and onChange updates the state when the user types. The handleSubmit function prevents the default form submission and displays an alert with the entered name.

When to Use a React Form

Forms in React are essential for collecting and handling user input. They are widely used in web applications for various purposes.

Handling User Authentication

Forms allow users to log in or register by entering their credentials.

JSX

Open in Mimo

function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log("Logging in with:", email, password);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" placeholder="Email" onChange={(e) => setEmail(e.target.value)} />
      <input type="password" placeholder="Password" onChange={(e) => setPassword(e.target.value)} />
      <button type="submit">Login</button>
    </form>
  );
}

Handling Search Functionality

A form can capture user search input and trigger a search query.

JSX

Open in Mimo

function SearchBar({ onSearch }) {
  const [query, setQuery] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    onSearch(query);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" placeholder="Search..." onChange={(e) => setQuery(e.target.value)} />
      <button type="submit">Search</button>
    </form>
  );
}

Validating User Input

React forms can validate inputs before submission to prevent errors.

JSX

Open in Mimo

function EmailForm() {
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    if (!email.includes("@")) {
      setError("Invalid email address");
      return;
    }
    console.log("Valid email submitted:", email);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" placeholder="Enter your email" onChange={(e) => setEmail(e.target.value)} />
      {error && <p style={{ color: "red" }}>{error}</p>}
      <button type="submit">Submit</button>
    </form>
  );
}

Examples of React Forms

How to Get Selected Elements from a React Form

You can use the useRef hook to access selected form elements without relying on state.

JSX

Open in Mimo

import { useRef } from "react";

function SelectExample() {
  const selectRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Selected value: ${selectRef.current.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <select ref={selectRef}>
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="cherry">Cherry</option>
      </select>
      <button type="submit">Submit</button>
    </form>
  );
}

This example shows how to get the selected value from a dropdown using a reference.

Using React Form Hook

react-hook-form simplifies form handling and validation with minimal re-renders.

JSX

Open in Mimo

import { useForm } from "react-hook-form";

function HookFormExample() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("username", { required: true })} placeholder="Username" />
      {errors.username && <p style={{ color: "red" }}>Username is required</p>}
      <button type="submit">Submit</button>
    </form>
  );
}

React Form Validation

Client-side validation ensures data accuracy before submission.

JSX

Open in Mimo

function ValidationForm() {
  const [input, setInput] = useState("");
  const [error, setError] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    if (input.length < 3) {
      setError("Input must be at least 3 characters long");
      return;
    }
    console.log("Valid input:", input);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" onChange={(e) => setInput(e.target.value)} />
      {error && <p style={{ color: "red" }}>{error}</p>}
      <button type="submit">Submit</button>
    </form>
  );
}

Learn More About React Forms

Do You Need Form Libraries in React?

React allows you to build forms with just state and event handlers. However, form libraries like react-hook-form and Formik simplify state management and validation.

JSX

Open in Mimo


import { useFormik } from "formik";
import * as Yup from "yup";

function FormikExample() {
  const formik = useFormik({
    initialValues: { email: "" },
    validationSchema: Yup.object({
      email: Yup.string().email("Invalid email").required("Required"),
    }),
    onSubmit: (values) => console.log(values),
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <input
        type="email"
        name="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />
      {formik.errors.email && <p style={{ color: "red" }}>{formik.errors.email}</p>}
      <button type="submit">Submit</button>
    </form>
  );
}

React Form Example with Multiple Inputs

Handling multiple input fields requires maintaining state for each field.

JSX

Open in Mimo

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

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="name" onChange={handleChange} placeholder="Name" />
      <input type="email" name="email" onChange={handleChange} placeholder="Email" />
      <button type="submit">Submit</button>
    </form>
  );
}

React forms provide flexibility, allowing controlled and uncontrolled components, client-side validation, and easy data management. Choosing between native state handling and libraries depends on the complexity of the form and project requirements.

Join 35M+ people learning for free on Mimo