Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

What are Controlled components in ReactJS ?

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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.

In the form elements are either the typed ones like textarea. input or the selected one like radio buttons or checkboxes, whenever there is any change, made it is updated accordingly through some functions that update the state as well.


Creating React Application:

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: It will look like this.

Example: We are creating a simple form with having input field names and a button to submit. We are using react hook useState to maintain two of our states showName and name which stores a boolean value and a string respectively.

We are creating an onClick function named as handleSubmit which prevents the default behavior of submit button and sets the showName to true. And after clicking on the button i.e submitting our form we are displaying the name that we have entered.


import { useState } from 'react';
function App() {
  const [name, setName] = useState('');
  const [showName, setShowName] = useState(false);
  function handleSubmit(e) {
  return (
    <div className="App">
        <input name="name" value={name} 
          onChange={(e) => setName(} />
        <button onClick={handleSubmit} type="submit">
      {/* Checks the condition if showName is 
      true, which will be true only if 
      we click on the submit button */}
      {showName === true && 
      <p>You have submitted. Name: {name}</p>}
export default App;

Steps to run the application: Run the application using the following command from the root directory of the project:

npm start



My Personal Notes arrow_drop_up
Last Updated : 09 Mar, 2022
Like Article
Save Article
Similar Reads
Related Tutorials