React - lesson 5 | HackIndia Skills

Key point

One source

A controlled form input gets its current value from React state and updates that state on every change. Text inputs use a string value prop. Checkboxes use a boolean checked prop.

This makes your form easy to read, validate, reset, and submit because React owns the important form data.

Why control forms

In plain HTML, the browser remembers what the user typed. In React, you usually want that data in state so the rest of your component can use it.

For your project, this matters in forms like adding a task, registering a team member, filtering events, or entering UPI payment details for a demo checkout.

Your to-do

Build the pattern

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Create one useState value for the input data that changes.
Pass value to a text input, or checked to a checkbox.
Add onChange to update state immediately from the event.
Handle submit with onSubmit and preventDefault.
Reset the state after submit if the form should clear.

0 of 5 done

Example

Task form example

This form controls a text input and a checkbox. Notice the checkbox reads e.target.checked, not e.target.value.

You can place this in a component file, then pass the new item to a parent later when you learn lifted state.

import { useState } from 'react';

export default function TaskForm() {
  const [title, setTitle] = useState('');
  const [isUrgent, setIsUrgent] = useState(false);
  const [message, setMessage] = useState('');

  function handleSubmit(e) {
    e.preventDefault();

    const cleanTitle = title.trim();
    if (!cleanTitle) {
      setMessage('Enter a task title.');
      return;
    }

    setMessage(
      isUrgent ? `Added urgent task: ${cleanTitle}` : `Added task: ${cleanTitle}`
    );
    setTitle('');
    setIsUrgent(false);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Task title
        <input
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="Finish React project"
        />
      </label>

      <label>
        <input
          type="checkbox"
          checked={isUrgent}
          onChange={(e) => setIsUrgent(e.target.checked)}
        />
        Mark as urgent
      </label>

      <button type="submit">Add task</button>
      <p>{message}</p>
    </form>
  );
}

Common mistake

Avoid mixed control

Do not let an input switch between controlled and uncontrolled. If a text input is controlled, always give it a string, not null or undefined.

This is why the example starts title as ''. The input always has a safe string value, even before the user types.

Tip

Use AI carefully

You can ask an AI tool to draft a React form, but check the important parts yourself. The input should have value plus onChange. A checkbox should have checked plus onChange.

Also check that submit uses preventDefault, state is replaced with setters, and the code does not add useEffect just to copy form values around.