React - lesson 5 | HackIndia Skills

React - lesson 5 | HackIndia Skills | HackIndia

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>
  );
}

Build controlled forms

One source

Why control forms

Build the pattern

Task form example

Avoid mixed control

Use AI carefully

Do this now

Quick check