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