Two Ways to Create and Use Uncontrolled Components in ReactJS
November 6, 2022
⭕ Overview
In an Uncontrolled Component, the “single source of truth” (data) is maintained in the actual DOM. They are like traditional HTML form inputs. An input form element whose value is not controlled by React in this way is called an “uncontrolled component”.
In an Uncontrolled Component, form data are retained in the DOM, but you can use a “ref” in React to get the values from the DOM. Since an uncontrolled component keeps the source of truth in the DOM, the displayed value will not update as the user types.
In this video, we’ll learn how to create Uncontrolled Components in React using two approaches:
🔷 Using the React.createRef()
🔷 Using an inline callback function
⭕ Chapters
00:00 Introduction
03:57 Using the React.createRef() function
05:13 Using the inline callback function
07:14 Coding demo
22:21 Bonus: refactoring using a nested state properties
