Part 20 Uncontrolled way React forms | React Validations | useRef hook

Form validations:-
1. Controlled way
2. The uncontrolled way React forms and Validations

In React, an uncontrolled component is a form element whose value is not controlled by React but rather by the DOM. This means that the state of the component is managed by the DOM itself rather than React.

Uncontrolled components are generally easier to implement and require less code, but they can be more error-prone as they rely on the DOM to maintain state.
- using useRef() hook, we can implement an uncontrolled way.

Example for Uncontrolled way. useRef() hook will be used to handle the form elements.
1. Create one useRef hook for each input control.
const firstNameRef = useRef();

2. Assign the reference variable to the input using "ref" property.
input ref={firstNameRef}

3. To get the value from the reference object, we can get it from the current property as shown below.
const firstName = firstNameRef.current.value;


In this example, we are using the useRef hook to get a reference to the username and password input fields. When the form is submitted, we get the values of these input fields directly from the DOM using the value property and create a form data object. The form data object is then logged to the console.

Note that we are not using any state variables to manage the state of the form fields. Instead, the DOM is responsible for maintaining the state of these fields.