React - Controlled Component

About

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.

Example

See select controlled component





Discover More
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 - Form

HTML form elements work a little bit differently from other DOM elements in React, because form elements naturally keep some internal state. : The state is controlled by React : The state is controlled...
React - Input Element

This page is the handling of input element in React. The react forms components input accept a value attribute that is used to implement a controlled component. A React form: written as a class...
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...



Share this page:
Follow us:
Task Runner