In the realm of React development, understanding the concepts of controlled
and uncontrolled
components is essential for building robust and maintainable applications. In this blog, we'll explore the differences between controlled and uncontrolled components in React and discuss when to use each approach effectively.
In react, there are two main approaches to handling form inputs:
Controlled components
Uncontrolled components
Controlled components
Controlled components are form inputs whose values are controlled by React state. The state variables are updated whenever the value of the input changes, and the value of the input is set explicitly through the value prop.
The onChange
event handler is used to update the state.
Example:
import React, { useState } from "react";
function ControlledComponent() {
const [name, setName] = useState("");
const handleChange = (e) => {
setName(e.target.value);
}
return (
<input type="text"
value={name}
onChange={handleChange}
/>
);
}
In the example, the name state variable is used to control the value of the input field. The handleChange
function updates the name state whenever the input value changes.
The value of the input is set to the current value of the name state variable through the value prop.
Uncontrolled components
Uncontrolled components are form inputs that manage their own state internally, rather than being controlled by React state.
You can access the current value of the input using a ref
after the form is submitted or whenever needed.
Example:
import React, { useRef } from "react";
function UncontrolledComponent() {
const inputRef = useRef(null);
const handleSubmit = (e) => {
e.preventDefault();
console.log(inputRef.current.value);
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
ref={inputRef}
/>
<button type="submit">Submit</button>
</form>
);
}
In the example, the inputRef
is used to create a ref
for the input field. The handleSubmit
function accesses the current value of the input using inputRef.current.value
.
The form submission logic can be implemented to utilize the input value as required.
Stay tuned for more insights and practical examples of React! 🚀
Top comments (2)
Nice Posts
Thank you so much🥰