📝 Using State with Forms — Building Controlled Components

Forms are the primary way users input data. Use state to capture and manage form input values.

🎯 Controlled Components

A controlled component's value comes from state. When the user types, you update state, which updates the input.

The form input's value is controlled by state. This gives React full control over what the user sees and allows you to manipulate the input programmatically.

import { useState } from 'react';

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Name:', name);
    setName(''); // Clear form
  };

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

<details>

<summary>📚 More Examples</summary>

// Example: Multi-field form

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

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

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

</details>

💡 Handling Different Input Types

Different input types need different handling. Text inputs use `value`, checkboxes use `checked`, selects use `value`.

import { useState } from 'react';

function FormTypes() {
  const [text, setText] = useState('');
  const [checked, setChecked] = useState(false);
  const [selected, setSelected] = useState('option1');
  const [textarea, setTextarea] = useState('');

  return (
    <div>
      {/* Text input */}
      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Type here"
      />

      {/* Checkbox */}
      <label>
        <input
          type="checkbox"
          checked={checked}
          onChange={(e) => setChecked(e.target.checked)}
        />
        Agree to terms
      </label>

      {/* Select */}
      <select value={selected} onChange={(e) => setSelected(e.target.value)}>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
      </select>

      {/* Textarea */}
      <textarea
        value={textarea}
        onChange={(e) => setTextarea(e.target.value)}
        placeholder="Message"
      />
    </div>
  );
}

<details>

<summary>📚 More Examples</summary>

// Example: Radio buttons

function SurveyForm() {
  const [rating, setRating] = useState('good');

  return (
    <div>
      <label>
        <input
          type="radio"
          value="bad"
          checked={rating === 'bad'}
          onChange={(e) => setRating(e.target.value)}
        />
        Bad
      </label>
      <label>
        <input
          type="radio"
          value="good"
          checked={rating === 'good'}
          onChange={(e) => setRating(e.target.value)}
        />
        Good
      </label>
      <p>You selected: {rating}</p>
    </div>
  );
}

</details>

🔧 Form Submission

Prevent the default form submission with `e.preventDefault()` and handle the submission in your event handler.

import { useState } from 'react';

function SignupForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [message, setMessage] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();

    // Validate
    if (!email || !password) {
      setMessage('Please fill in all fields');
      return;
    }

    // Submit
    try {
      const response = await fetch('/api/signup', {
        method: 'POST',
        body: JSON.stringify({ email, password }),
      });
      setMessage('Account created!');
      setEmail('');
      setPassword('');
    } catch (error) {
      setMessage('Error: ' + error.message);
    }
  };

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

📊 Summary

🔑 Key Takeaways

• ✅ Use state to control form input values (controlled components)

• ✅ Update state on every input change

• ✅ Text inputs use `value`, checkboxes use `checked`

• ✅ Call `preventDefault()` to handle form submission

• ✅ Derived state (`checked={value === 'option'}`) for radio buttons

• ✅ Always clear form after successful submission

Ready to practice? Challenges | Next: State vs Props