React JS 19 Tutorial in Hindi #39 uncontrolled component

  1. What is Uncontrolled component?
  2. Make Uncontrolled component with query selector.
  3. Make Uncontrolled component with useRef.
  4. Interview Question


In React, an uncontrolled component is a form element (like an <input>, <textarea>, or <select>) that manages its own state internally, instead of relying on React state.

In simple terms:

The form element controls itself — React doesn't track or manage its value directly.


import { useRef } from "react";

function App() {

const userRef=useRef();
const passwordRef=useRef();


const handleForm=(event)=>{
event.preventDefault();
const user= document.querySelector("#user").value;
const password= document.querySelector("#password").value;

console.log(user,password);
}

const handleFormRef=(event)=>{
event.preventDefault()
const user= userRef.current.value
const password= passwordRef.current.value

console.log("handleFormRef",user,password);

}
return (
<>
<h1>Uncontrolled Component</h1>
<form action="" method="post" onSubmit={handleForm}>
<input type="text" id="user" placeholder="enter user name" />
<br /><br />
<input type="password" id="password" placeholder="enter user password" />
<br /><br />
<button>
Submit
</button>

</form>

<hr />
<h1>Uncontrolled Component with useRef</h1>
<form action="" method="post" onSubmit={handleFormRef}>
<input type="text" ref={userRef} id="userRef" placeholder="enter user name" />
<br /><br />
<input type="password" ref={passwordRef} id="passwordRef" placeholder="enter user password" />
<br /><br />
<button>
Submit with Ref
</button>

</form>
</>
)
}

export default App