React Forms: A Guide to Building and Managing Forms in React

Forms in React allow users to interact with web applications effectively. Unlike traditional HTML forms, React provides better control over form inputs, making data management easier and more flexible.

Adding Forms in React

To create a basic form in React, use the same approach as regular HTML:

Example: A Simple Form

function MyForm() {
  return (
    <form>
      <label>
        Enter your name:
        <input type="text" />
      </label>
    </form>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

This basic form works, but by default, submitting it refreshes the page. React offers tools to control this behaviour.

Handling Forms with React

React forms handle data changes and submissions differently by managing the form’s state within components. To achieve this, the useState Hook is commonly used.

Example: Controlled Input

import { useState } from 'react';
import ReactDOM from 'react-dom/client';

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

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

Submitting Forms

You can control form submission by adding an onSubmit event handler:

Example: Form Submission Handler

import { useState } from 'react';
import ReactDOM from 'react-dom/client';

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

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`You entered: ${name}`);
  };

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

Handling Multiple Input Fields

Manage multiple inputs by storing the form data in an object:

Example: Handling Multiple Inputs

import { useState } from 'react';
import ReactDOM from 'react-dom/client';

function MyForm() {
  const [inputs, setInputs] = useState({});

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

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(JSON.stringify(inputs));
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input 
          type="text" 
          name="name" 
          value={inputs.name || ""} 
          onChange={handleChange} 
        />
      </label>
      <label>
        Age:
        <input 
          type="number" 
          name="age" 
          value={inputs.age || ""} 
          onChange={handleChange} 
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

Handling Textareas and Select Inputs

React manages textarea and select elements slightly differently by placing their values in the value attribute.

Example: Textarea

function MyForm() {
  const [text, setText] = useState("Default text");

  return (
    <form>
      <textarea value={text} onChange={(e) => setText(e.target.value)} />
    </form>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

Example: Select Box

function MyForm() {
  const [car, setCar] = useState("Volvo");

  return (
    <form>
      <select value={car} onChange={(e) => setCar(e.target.value)}>
        <option value="Ford">Ford</option>
        <option value="Volvo">Volvo</option>
        <option value="Fiat">Fiat</option>
      </select>
    </form>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);

Want to learn React with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!