In React, Controlled components refer to the components where the state and behaviors are controlled by Parent components while Uncontrolled components are the ones having control of their own state and manage the behaviors on themselves.
Table of Content
Uncontrolled Components
Uncontrolled Components are the components that are not controlled by the React state and are handled by the DOM (Document Object Model). So in order to access any value that has been entered we take the help of refs.
For instance, if we want to add a file as an input, this cannot be controlled as this depends on the browser so this is an example of an uncontrolled input.
Steps to create the project:
Step 1: Create the react app using the following command:
npm create-react-app project
Step 2: After creating your project folder(i.e. project), move to it by using the following command:
cd project
Project Structure:
Example: We are creating a simple form that comprises an input field with a label name and a submit button with an onSubmit function that triggers when we submit the form. We are accessing the name we have filled using useRef.
App.js
// FileName - App.jsimport React, { useRef } from "react";import "./App.css";function App() { const inputRef = useRef(null); function handleSubmit() { alert(`Name: ${inputRef.current.value}`); } return ( <div className="App"> <h1 className="neveropen">GeeksForGeeks</h1> <h3>Uncontrolled Component</h3> <form onSubmit={handleSubmit}> <label>Name :</label> <input type="text" name="name" ref={inputRef} /> <button type="submit">Submit</button> </form> </div> );}export default App; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: This output will be visible on http://localhost:3000/ in the Web browser.
Controlled Components
In React, Controlled Components are those in which form’s data is handled by the component’s state. It takes its current value through props and makes changes through callbacks like onClick, onChange, etc. A parent component manages its own state and passes the new values as props to the controlled component.
Example: We are creating a state name that stores the value we enter into the input field using the useState hook. We are creating an onChange function in the input field that stores the data we are entering in the input field to our state. There is another function handleSumit that gets triggered when we submit the form and it shows the name we have entered on the alert box.
App.js
// FileName - App.jsimport { useState } from "react";import "./App.css";function App() { const [name, setName] = useState(""); function handleSubmit() { alert(`Name: ${name}`); } return ( <div className="App"> <h1 className="neveropen">GeeksForGeeks</h1> <h3>Controlled Component</h3> <form onSubmit={handleSubmit}> <label>Name:</label> <input name="name" value={name} onChange={(e) => setName(e.target.value) } /> <button type="submit">Submit</button> </form> </div> );}export default App; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: This output will be visible on http://localhost:3000/ in the Web browser.
Difference between Controlled and Uncontrolled Components
Controlled Component |
Uncontrolled Component |
|---|---|
| The component is under control of the component’s state. | Components are under the control of DOM. |
| These components are predictable as are controlled by the state of the component. | Are Uncontrolled because during the life cycle methods the data may loss |
| Internal state is not maintained | Internal state is maintained |
| It accepts the current value as props | We access the values using refs |
| Does not maintain its internal state. | Maintains its internal state. |
| Controlled by the parent component. | Controlled by the DOM itself. |
| Have better control on the form data and values | Has very limited control over form values and data |
