Forms: How to create forms in React, including controlled and uncontrolled components.

When building a web application using React, it is common to need forms to collect user input. React provides two ways to handle form inputs: controlled and uncontrolled components.

Controlled Components

Controlled components are React components that render a form element and manage its state by controlling the value of the form element. This value is passed as a prop to the component and is updated when the user types in the form element. The component also handles the submission of the form.

To create a controlled component, you need to define a state object that contains the value of the form element. Then, you need to define an event handler that updates the state object when the user types in the form element. Finally, you need to pass the state object and the event handler as props to the form element.

Controlled components provide a way to manage form input data, making it easier for developers to write code to handle form submission. By using controlled components, you are able to keep the state of the form data in the component itself. This means that you can easily manipulate the data before it is submitted to the server.

Here is an example of a controlled component that renders an input element:

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

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  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>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

In this example, the NameForm component has a state object that contains a value property. The handleChange method updates this property when the user types in the input element. The handleSubmit method is called when the form is submitted and displays an alert with the value of the input element.

Uncontrolled Components

Uncontrolled components are React components that render a form element but do not manage its state. Instead, the state is managed by the DOM. This means that the value of the form element is obtained using a ref.

To create an uncontrolled component, you need to define a ref and attach it to the form element. Then, you can obtain the value of the form element using the ref.

Uncontrolled components are useful when the input data is not critical and does not require much manipulation before it is submitted. They are also useful when you need to work with legacy code or when you need to integrate with third-party libraries.

Here is an example of an uncontrolled component that renders an input element:

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.input = React.createRef();
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.input.current.value);
    event.preventDefault();
  }

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

In this example, the NameForm component has a ref object that is attached to the input element. The handleSubmit method is called when the form is submitted and displays an alert with the value of the input element obtained using the ref.

Conclusion

React provides two ways to handle form inputs: controlled and uncontrolled components. Controlled components manage the state of the form element, while uncontrolled components allow the DOM to manage the state. Both approaches have their use cases and it is up to the developer to choose the one that fits their needs the best.

When creating forms in React, it is important to consider the type of data being collected and the level of control needed over that data. Controlled components are useful for managing complex data that requires manipulation before submission, while uncontrolled components are useful for simple data that does not require much manipulation. With these two approaches, React provides developers with the flexibility to create forms that meet their specific needs.