What is uncontrolled component in React?

In React, a component can either be controlled or uncontrolled. An uncontrolled component is a component that manages its own state internally. This means that the component doesn't rely on any external state management, such as props or state from a parent component. Instead, it manages its own state using the component's own internal state. An example of an uncontrolled component is an input field. When a user types something into an input field, the value of the input field is stored in the component's internal state. The component then updates its own state and re-renders itself with the new value. The parent component doesn't need to know anything about the value of the input field, as the input field is managing its own state internally.

Here's an example of an uncontrolled input field in React:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  handleSubmit = (event) => {
    event.preventDefault();
    console.log(this.inputRef.current.value);
  }

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

In this example, the input field is uncontrolled because it manages its own state internally using a ref. When the user types something into the input field and submits the form, the value of the input field is logged to the console using the ref. The parent component doesn't need to know anything about the value of the input field, as the input field is managing its own state internally.