Uncontrolled Components

Strengthen your knowledge of uncontrolled components and see them in action.

We'll cover the following

Understanding uncontrolled components

Code example
How are controlled components different?

Understanding uncontrolled components

Uncontrolled components can take two different forms. First, plain form elements can be rendered, which are processed server-side and do not interact with React at any time. The form is completely static, so to say. React does not intervene if this is what is desired and allows the developer to freely choose an approach.

But uncontrolled components could also still interact with React, which is the second form of an uncontrolled component. This variation of an uncontrolled component writes the changes of the form element into React state either to validate data in the background or to render the data in a different place. Changes made to the state in React in different parts of the application do not directly influence the form fields.

Code example

The following is an example of an uncontrolled component:

Get hands-on with 1200+ tech skills courses.

Introduction

Introduction to ES2015+

JSX – an Introduction

Rendering of Elements and Components in React

State and Lifecycle Methods

Event Handling

Forms

Lists, Fragments, and Conditional Rendering

CSS and Styling

Higher Order Components

Functions as a Child and Render Props

Context API

Refs

Error Boundaries

Portals

Code Splitting

Typechecking with PropTypes, Flow, and TypeScript

React Hooks – an Introduction

Hooks in Action

The Hooks API

Routing in React

State Management

Internationalization

Conclusion

Appendix

Uncontrolled Components

Understanding uncontrolled components

Code example