A Component is one of the core building block of React. In other words, a component is a JavaScript function that takes inputs(props) and returns a React element representing how a section of the UI should look.
Controlled Components: Form data is handled by the state under the component. The form has default HTML form conduct of browsing to the new page when the client/user submits the form. If you need similar conduct in React, it works. 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 with a procedure 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
Creating React Application:
-
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: It will look like the following:
Example 1: 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 React.Component { constructor(props) { super(props); this.onChange = this.onChange.bind(this); this.state = { name: '' }; } onChange(e) { this.setState({ name: e.target.value }); } render() { return ( <div> <label for='name-input'>Message for GFG: </label> <input id='name-input' onChange={this.onChange} value={this.state.name} /> </div> ) } } export default App; |
The above example shows how the value property characterizes the current value of the input and the onChange event handler updates the component’s state with the client’s information/input.
Output: Form inputs ought to be characterized as controlled components where conceivable. This guarantees that the component state and the input esteem are in a state of harmony consistently, regardless of whether the value is changed by a trigger other than a client input.
Form input
Example 2: 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="neveropen"> <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; |
Output: In this example a component renders one textbox on the page and repeats back whatever the client types in the textbox. A state object is created which holds a property known as message. This is where the value entered by the user into the given textbox is stored. Also, onChange event handler is declared for controlling the component.
Controlled component
