Controlled Components

In React, a controlled component is an input form element whose value is controlled by React. This means that the component’s value is handled by the component’s state, and any changes to the value are made through state updates. Controlled components are essential in React for managing user input and ensuring that the component’s state is always up-to-date.

Basic Example

Here’s a simple example of a controlled component in React:

import React, { useState } from 'react';
 
function ControlledInput() {
  const [name, setName] = useState('');
 
  const handleChange = (event) => {
    setName(event.target.value);
  };
 
  return (
    <div>
      <input type="text" value={name} onChange={handleChange} />
      <p>Your name is: {name}</p>
    </div>
  );
}

In this example, the input element’s value is controlled by the name state variable. When the user types something in the input field, the handleChange function is called, which updates the name state variable.

Advanced Usage

If you need to handle multiple input fields, you can use a single state object to store all the values. Here’s an example:

import React, { useState } from 'react';
 
function ControlledForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
  });
 
  const handleChange = (event) => {
    setFormData({
      ...formData,
      [event.target.name]: event.target.value,
    });
  };
 
  return (
    <div>
      <input type="text" name="name" value={formData.name} onChange={handleChange} />
      <input type="email" name="email" value={formData.email} onChange={handleChange} />
      <input type="password" name="password" value={formData.password} onChange={handleChange} />
      <p>Your name is: {formData.name}</p>
      <p>Your email is: {formData.email}</p>
      <p>Your password is: {formData.password}</p>
    </div>
  );
}

In this example, we use a single formData state object to store the values of all the input fields. The handleChange function updates the corresponding value in the formData object based on the name attribute of the input field.

Best Practices

Here are some best practices to keep in mind when working with controlled components:

• Always use the value attribute to set the value of the input field, and the onChange event to handle changes to the value.
• Use the useState hook to manage the state of the component, and update the state using the setState function.
• Use a single state object to store all the values of multiple input fields, and update the state object using the spread operator ({ ...state, [key]: value }).
• Avoid using the defaultValue attribute, as it can cause issues with the component’s state.

Key Takeaways

Here are the key takeaways from this guide:

• Controlled components are essential in React for managing user input and ensuring that the component’s state is always up-to-date.
• Use the value attribute to set the value of the input field, and the onChange event to handle changes to the value.
• Use the useState hook to manage the state of the component, and update the state using the setState function.
• Always use a single state object to store all the values of multiple input fields, and update the state object using the spread operator ({ ...state, [key]: value }).