React - Controlled Component


A controlled component is a component such as a form element where its state is controlled by React.

The inverse is called a uncontrolled component where the state is controlled by the DOM

In a controlled component, state is handled by the React component

The nature of the state is determined during the first render, it's considered controlled if the value is not undefined.


See select controlled component

Discover More
Examples of React Input Element with Class component

This page keeps the example with class component for a input The react forms components input accept a value attribute that is used to implement a controlled component. A React form: written as...
How to create a Select element in React?

This page is the creation of a HTML select element in React and how to handle it in a form In a non-controlled fashion, you need to read the value from the HTML select DOM element. form implementing...
Html Checkbox Illustration
How to create a checkbox in React?

This page shows you how you can create a checkbox in React. This example is written in JSX and shows you a controlled component. The react forms components input accept a value attribute that is used...
React - Input Element

This page is the handling of input element in React. These examples are made with a function components. If you still want to see the same example with class component, they are here: The react...
React - TextArea

In React, a React formformcontrolled componentclass syntax
React - Uncontrolled Component (DOM State)

An uncontrolled component is a component such as form where the state is handled by the DOM itself (not react) controlled component if: you need to write an very difficult event handler (for every...
What are React Forms?

A React form is the implementation of HTML form elements with HTML React elements It works a little bit differently from other DOM elements in React, because form elements naturally keep some internal...

Share this page:
Follow us:
Task Runner