Show List
Tutorials > React > Controlled and uncontrolled components in React

Controlled and uncontrolled components in React

In React, there are two types of form components: controlled components and uncontrolled components.

A controlled component is a component that has its state managed by React, which means that React is in charge of handling the value and updates to the input. The value of the input is determined by the component's state, and any changes to the input are reflected in the component's state.

Here's an example of a controlled component in React:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: "" };
  }

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  };

  handleSubmit = (event) => {
    alert("A name was submitted: " + this.state.value);
    event.preventDefault();
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input
            type="text"
            value={this.state.value}
            onChange={this.handleChange}
          />
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

ReactDOM.render(
  <NameForm />,
  document.getElementById("root")
);

In this example, the NameForm component has a state with a single property, value, which starts as an empty string. The handleChange method is used to update the state whenever the input changes, and the handleSubmit method is used to handle the form submit event. The render method returns a form with an input element, with its value set to the component's state and its onChange prop set to the handleChange function.

An uncontrolled component, on the other hand, is a component where the value of the input is determined by the DOM, and React only reads the value from the DOM when necessary. Uncontrolled components are often used when you want to manage the form data outside of React, such as in a form library or a back-end server.

Here's an example of an uncontrolled component in React:

class NameForm extends React.Component {
  handleSubmit = (event) => {
    alert("A name was submitted: " + this.input.value);
    event.preventDefault();
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" ref={(input) => (this.input = input)} />
        </label>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

ReactDOM.render(
  <NameForm />,
  document.getElementById("root")
);

In this example, the NameForm component uses a ref to create a reference to the input element, which allows you to access the value of the input directly from the DOM. The handleSubmit method uses the ref to read the value of the input when the form is submitted.

To summarize, controlled components are components where the state of the input is managed by React, and uncontrolled components are components where the value of the input is determined by the DOM and managed outside of React. Controlled components are often used when you need to have full control over the form data and its updates, while uncontrolled components are used when you want to manage the form data outside of React, such as in a form library or a back-end server. It's important to note that while uncontrolled components can be easier to set up, they may not be as flexible as controlled components, especially when it comes to handling complex forms and validations. On the other hand, controlled components require more code and more management of the component's state, but they offer more control and flexibility in handling the form data. In general, it's best to use controlled components when you need to have control over the form data, and to use uncontrolled components when you want to keep the form data management outside of React.



Next: Forms in React

    Leave a Comment

  • captcha text