CODEWITHSUNDEEP
reactjs
user12130418
user12130418

Reputation:

Difference between React controlled component and uncontrolled component

I am new to react and while learning I come across this example of controlled component.

function App() {
  let [fName, setFName]=useState('');

  return (
    <div className="container">
      <h1>Hello {fName }</h1>
      <input name ='fname' value={fName} onChange={(e)=> setFName(e.target.value)} type="text" placeholder="What's your first name?" />

    </div>
  );
}

just adding value={fName} makes is controlled . I don't actually understand what does it mean by controlled component and uncontrolled. Can you explain it from beginner prospective.

Upvotes: 1

Views: 4190

Answers (3)

akhtarvahid
akhtarvahid

Reputation: 9769

Here, Reactjs documentation provided explanation.

  • A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component "controls" it by handling the callback and managing its own state and passing the new values as props to the controlled component. You could also call this a dumb component/stateless component.

  • An Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

React form components support both controlled and uncontrolled usage:

Uncontrolled:

<input type="text" defaultValue="hey" ref={inputRef} />

Controlled:

<input type="text" value={this.state.value} onChange={onHandleChange} />

Upvotes: 3

kooskoos
kooskoos

Reputation: 4859

Controlled Components

These components have what is called a callback function that is triggered each time we enter something new in the form element.

Triggering the function will typically store or update what we type in the same React component that displays the form element that was used

Most widespread use it with forms

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>
    );
  }
}

Unontrolled Components

These components such as <input> typically maintain their own state and update it based on user input.

In other words, they will accept what we type and have the responsibility of remembering it, and in order to retrieve the values they remembered, you have to get it when you need it.

The latter usually happens during form submission. They can be classified under uncontrolled components.

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>
    );
  }
}

Upvotes: 3

phw
phw

Reputation: 128

An uncontrolled component means that you will let the component itself manage the value. It's own internal mechanism will keep track of it.

Now when you add the value property to the input component, you will start to "control" the component yourself. The value you put into that property, will be the value that will be displayed. You can literally control the value yourself, by just passing it in as is, or by changing the value before passing it in.

Upvotes: 3

Related Questions