Controlled Components in Forms

When a user types into a text box, where does the typed text live? In a plain HTML page, the browser keeps it inside the input element, and your code reads it when it needs it. React lets you choose a second answer: the text can live in a state variable, and the input only displays what that variable holds.

These two answers give the two ways of building forms in React. A form element whose value comes from React state is a controlled component. A form element that keeps its own value in the browser, which React reads only when needed, is an uncontrolled component