ReactJS Controlled vs Uncontrolled
Heading h1
ReactJS Controlled vs Uncontrolled
Syntax
Controlled
class ControlledComp extends React.Component {
constructor(props) {
super(props);
this.state = { value: '' };
}
handleChange = (event) => {
this.setState({ value: event.target.value });
}
handleSubmit = (event) => {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
Uncontrolled
function UncontrolledComp() {
let inputRef = useRef(null);
const handleSubmit = (event) => {
alert('A name was submitted: ' + inputRef.current.value);
event.preventDefault();
}
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" ref={inputRef} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
Example
Controlled
class ControlledExample extends React.Component {
constructor(props) {
super(props);
this.state = { value: '' };
}
handleChange = (event) => {
this.setState({ value: event.target.value });
}
handleSubmit = (event) => {
alert('A name was submitted: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
Uncontrolled
function UncontrolledExample() {
let inputRef = useRef(null);
const handleSubmit = (event) => {
alert('A name was submitted: ' + inputRef.current.value);
event.preventDefault();
}
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input type="text" ref={inputRef} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
Output
When the "Submit" button is clicked, an alert is displayed with the value of the input field. For both examples, the alert displays the value of the input field.
Controlled
Same as Uncontrolled
Uncontrolled
Same as Controlled
Explanation
React provides two approaches to handle form inputs: controlled and uncontrolled. In a controlled approach, the value of the form element is controlled by the React component. The component keeps the value in its state and updates it whenever the input changes. In an uncontrolled approach, the value of the form element is not controlled by the React component. The component instead uses a reference to the input element to get the value when needed.
Use
You should use the controlled approach when you need to validate and manipulate the user's input before sending it to the server. This way, the input can't be modified by the user before submitting it. You should use the uncontrolled approach when you don't need to validate or manipulate the user's input. This approach is less verbose and easier to implement.
Important Points
- In a controlled approach, the value of the form element is controlled by the React component.
- In an uncontrolled approach, the value of the form element is not controlled by the React component.
- Use the controlled approach when you need to validate and manipulate the user's input before sending it to the server.
- Use the uncontrolled approach when you don't need to validate or manipulate the user's input.
Summary
React provides two approaches to handle form inputs: controlled and uncontrolled. In the controlled approach, the value of the form element is controlled by the React component. In the uncontrolled approach, the value of the form element is not controlled by the React component. Use the controlled approach when you need to validate and manipulate the user's input before sending it to the server, and use the uncontrolled approach when you don't need to validate or manipulate the user's input.