Fix: A component is changing an uncontrolled input to be controlled

Описание

Learn about what is controlled and uncontrolled components in React, What are the differences between them and advantages of controlled components over uncontrolled components.

Email Regex: /[a-z0-9 #$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9 #$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/i

Source Code: https://github.com/collegewap/yt-controlled-uncontrolled

Blog: https://www.codingdeft.com/posts/react-controlled-uncontrolled/

Chapters:
0:00 Introduction and Project Setup
1:49 Creating an controlled input component
3:57 Fixing the uncontrolled to controlled error
6:07 Creating Uncontrolled Components (useRef hook)
9:31 Advantages of using controlled components: Email validation

We will solve the following error in this tutorial:

"A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component."