Open In App

What are the types of data that control a component ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:

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. 

Javascript




// 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:

heyGfGGIF

Output



Last Updated : 30 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads