Building Forms in React: Controlled and Uncontrolled Components

Master form creation in React using controlled and uncontrolled components. This guide explains the differences between these approaches, highlighting the advantages of controlled components for managing form data and enabling complex interactions. Learn best practices for building robust and efficient forms in your React applications.

Building Forms in React

Introduction to Forms in React

Forms are essential for user interaction in web applications, allowing users to input data and applications to gather information. React provides a robust way to create forms using controlled components, offering better control and management of form data compared to traditional HTML forms.

Types of Form Inputs in React

There are two main types of form input components in React:

Uncontrolled Components: These behave similarly to traditional HTML forms. The form data is managed by the DOM itself. You use refs to access the values.
Controlled Components: React manages the form data. The component's state holds the form values, which are updated using the `setState()` method. This offers more control and enables more complex form logic.

Uncontrolled Components

Uncontrolled components are simpler to implement for basic forms, but offer less control over the form's data. They rely on refs to access values from the DOM.

Uncontrolled Component Example


class App extends React.Component {
  constructor(props) {
    super(props);
    this.updateSubmit = this.updateSubmit.bind(this);
    this.usernameRef = React.createRef();
    this.companyNameRef = React.createRef();
  }
  // ... (rest of the component)
}

Controlled Components

Controlled components are the preferred method for most React forms. They provide better control over data flow and enable more complex form interactions.

Controlled Component Example


class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  // ... (rest of the component)
}

The key is that the component's state holds the value, and the `onChange` event updates the state. This ensures that React always controls the form's data.

Handling Multiple Inputs in Controlled Components

When you have multiple inputs, you can use the `name` attribute on each input to identify them in the `onChange` handler. The handler function can then update the appropriate part of the state.

Multiple Inputs Example


handleInputChange(event) {
  const target = event.target;
  const value = target.type === 'checkbox' ? target.checked : target.value;
  const name = target.name;
  this.setState({ [name]: value });
}

Building Forms in React: Controlled and Uncontrolled Components