Breaking News: Grepper is joining You.com. Read the official announcement!

controlled vs uncontrolled components in react js

Chetan Nada answered on December 29, 2022 Popularity 10/10 Helpfulness 2/10

answer controlled vs uncontrolled components in react js

controlled vs uncontrolled components in react js

Comment

// controlled vs uncontrolled components in react js

An uncontrolled component is a component that maintains its own internal state. means where form data is handled
by the DOM itself.
Think of a typical <input type='text' /> element. It appears onscreen as a text box. If you need to know what text is currently in the box, then you can ask the <input />, possibly with some code like this:

let input = document.querySelector('input[type="text"]');
 
let typedText = input.value; // input.value will be equal to whatever text is currently in the text box.
The important thing here is that the <input /> keeps track of its own text. You can ask it what its text is at any time, and it will be able to tell you.

The fact that <input /> keeps track of information makes it an uncontrolled component. It maintains its own internal state, by remembering data about itself.


A controlled component is a component that does not maintain any internal state. means form data is handled by a React component. 
Since a controlled component has no state, it must be controlled by someone else.

A controlled component, on the other hand, has no memory. If you ask it for information about itself, then it will have to get that information through props. Most React components are controlled.

In React, when you give an <input /> a value attribute, then something strange happens: the <input /> BECOMES controlled. It stops using its internal storage. This is a more ‘React’ way of doing things.

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Dec 29 2022

Chetan Nada

0 Answers Avg Quality 2/10

controlled vs uncontrolled components in react js

Contents

More Related Answers

controlled vs uncontrolled components in react js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.