What are the types of data that control a component ?
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
Creating React Application:
Step 1: Create a React application using the following command in the terminal/ command prompt:
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
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.
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.
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.
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.