Forms in React: Controlled Components React

What You’ll Learn 📚

• Understanding controlled components
• Creating simple and complex forms in React
• Handling form submissions
• Troubleshooting common issues

Introduction to Controlled Components

In React, a controlled component is an input form element whose value is controlled by React. This means that the form data is handled by the React component, not the DOM. This approach allows you to keep the form data in sync with the component’s state.

Think of controlled components as a way for React to ‘control’ the form inputs, ensuring that the UI and the state are always in sync.

Key Terminology

• State: An object that determines the behavior and rendering of a component.
• Props: Short for properties, these are read-only attributes used to pass data from parent to child components.
• Event Handling: The process of responding to user actions like clicks, typing, etc.

Simple Example: A Basic Input Field

import React, { useState } from 'react';

function SimpleForm() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    

      
Simple Input Form
      
      
Current Input: {inputValue}
    
  );
}

export default SimpleForm;

Progressively Complex Examples

Example 1: A Form with Multiple Inputs

import React, { useState } from 'react';

function MultiInputForm() {
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: ''
  });

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

  return (
    

      
Multi-Input Form
      
      
      
First Name: {formData.firstName}
      
Last Name: {formData.lastName}
    
  );
}

export default MultiInputForm;

Example 2: Handling Form Submission

import React, { useState } from 'react';

function SubmitForm() {
  const [formData, setFormData] = useState({
    email: '',
    password: ''
  });

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

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Submitted: ${formData.email}, ${formData.password}`);
  };

  return (
    

      
Submit Form
      
      
      Submit
    
  );
}

export default SubmitForm;

Common Questions and Answers

1. Why use controlled components?

   Controlled components provide a way to manage form data in React’s state, ensuring that the UI is always in sync with the component’s data.

2. How do I handle multiple inputs?

   Use an object in the state to store each input’s value, and update the state using the input’s name attribute.

3. What is event.preventDefault()?

   This method prevents the default action of the event, such as form submission, allowing you to handle it with JavaScript.

4. Why is my input not updating?

   Ensure the value attribute of the input is correctly tied to the state and that the onChange handler updates the state.

5. Can I use uncontrolled components?

   Yes, but controlled components are preferred for better control and predictability of form data.

Troubleshooting Common Issues

If your form inputs are not updating, double-check that the value attribute is linked to the correct state variable and that your onChange handler is correctly updating the state.

Practice Exercises

1. Create a form with additional fields like phone number and address, and handle their state.
2. Modify the form to include validation logic, such as checking if the email is in a valid format.

For more information, check out the React documentation on forms.