What are controlled components?

Q: What are controlled components?

import { useState } from "react"; function App() { const [name, setName] = useState(""); function handleSubmit(event) { event.preventDefault(); alert(`Name: ${name}`); } return ( Name: setName(e.target.value)} /> Submit ); } export default App; import React, { useRef } from "react"; function App() { const inputRef = useRef(null); function handleSubmit(event) { event.preventDefault(); alert(`Name: ${inputRef.current.value}`); } return ( Name : Submit ); } export default App;

Difficulty: 5/10

state management, form handling, input synchronization

Controlled components are those in which form data is handled by the component’s state. The component's state manages the value of the form element. Any changes to the input are handled by functions like `onChange`, which update the state. Uncontrolled components are those where the form data is managed by the DOM, not by the component's state. The values of the form elements are handled by the DOM itself, and to access any value that has been entered, we take the help of refs

Controlled Component

Uncontrolled Component

Scenario Questions

0-2 years experience

Follow-up Questions