What are the types of data that control a component ?

A Component is one of the core building blocks of React. In other words, a component is a JavaScript function that takes inputs(props) and returns a React element representing how a UI section should look.

Prerequisites:

• NodeJS or NPM
• React JS
• Controlled Components

Controlled Components:

Form data is handled by the state under the component. The form has a default HTML form conduct of browsing to the new page when the client/user submits the form. Yet, as a rule, it's helpful to have a JavaScript function that handles the accommodation of the form and approaches the information that the client/user submitted into the form. The standard method to accomplish this is called "controlled components".

Why to use Controlled Components:

You need to compose an event handler for each way your information can change and line the entirety of the input state through a React Component.

• Form data consists of:
  • text inputs
  • number inputs
  • radio inputs
  • checkbox inputs
  • textareas
  • selects

Steps to Create the React Application And Installing Module:

Step 1: Create a React application using the following command in the terminal/ command prompt:

create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: Now write down the following code in the App.js file. Here, App is our default(parent) component where we have written our code. 

// App.js

import React, { Component } from 'react';

class App extends Component {
    state = {
        message: ''
    }
    updateMessage = (newText) => {
        console.log(newText);
        this.setState(() => ({
            message: newText
        }));
    }
    render() {
        return (
            <div className="App">
                <div className="geeks">
                    <input type="text"
                        placeholder="Write something for gfg"
                        value={this.state.message}
                        onChange={(event) => this
                          .updateMessage(event.target.value)}
                    />
                    <p>Message for GFG: {this.state.message}</p>
                </div>
            </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: