How To Create Attribute Properties For React Applications? » My Blogging

How to create attribute properties for React applications?

We have to create attributes properties for this state like first name last name and email ID so go to the state and let’s create the first name and let’s initialize empty and also create a last name that’s the name property which lies to empty and let’s go and let’s also create email ID property and let’s initialize to empty all right guys now these basically properties will help us to get the form data and this data will be available in a form submission all right got it.


We have to add this property to the state and the input field we get data from the input field inside these properties and this properties data will be available while from submission so try to understand the flow so inside state we create our fields or properties and these properties we used to store the input from a data input field from data and these properties will available in a form submission all right guys so look at here at the very first time the first name is empty so you can see an empty uh input text field and once we enter something in an input text field then this event handler will get called let me quickly create this event handler.

Let me capture the event here all right, so this is the event and from the event, we can get a value like an event.target.value and we can assign this value to the first name so look at here the flow the state we have defined a property called post name ID and it is empty and here inside input field we have a value and we have here I added the first name and at the very first time the first name is empty and as soon as we enter something in a text field then this I know event handler will get called and where I will extract a value from this input field from the event and we use set state method to add the value to the first name and now we can see the value of the first name inside the input text field, so this is the flow okay got it.

Similarly, let’s create an input field for last name and email let me copy and paste here let’s change this accordingly last name right here placeholder as the last name and this is the last name change last name handler and this is the last name all right great now let’s create an event handler for change last name handler let me just copy this and paste here and just change from post name to last name all.

One more important thing is we need to bind this event handler in a constructor to go to the constructor within constructor just type this and then let’s use the bind method to bind this event handler to the component bind and pass this reference similarly let’s create let’s also bind a handler method that changes post name handler method and then pass this reference and guys now let’s go back to the form and let’s copy this.

Let’s also add one more field called email address let’s change the placeholder from the last name to email address and also label email address all right and also name from the last name to email ID let’s change this android method that changes event handler let me change this label let’s say email ID after that let’s go ahead and let’s implement this change email handler over here let me copy the existing method let’s paste here and let’s copy the name of the change email handler over here and just change email ID that’s it guys now once we have created the first name last name email ID for fields now it’s time to create a submit button submit and cancel button it’s pretty simple to go to the form right here let me add two buttons.

This is the button to save the employee data all right and this is the cancel button and here we have added event handler so whenever uh we click on save button then this event handler will if this event handler will get called let’s go ahead and let’s bind this event handler in a constructor you can directly bind this event handler here also, for example, look at here for cancel method I have just added uh you know bind method here so you can use this approach or you can also in a constructor you can also bind this event handler in a constructor, so this is the recommended way and this is recommended by a React team.

If you you can see this approach in a React documentation as well bind and pass this all right guys let me create a save employee method here and just call prevent default after that so we have defined properties right inside state so once we enter something in these fields then properties will get updated uh the data using set property set state method here and now the first name last name email ID, so this property has a data.

Let’s get data from these properties while form submission so here uh save employee method right, so this method will get called whenever we hit the save button or whenever we submit the form so let’s go ahead and let’s get the data from this property here inside the save employee method let me quickly create an employee JavaScript object and let me add a data to the object, for example, look at here this employee JavaScript object and this post name I have you know retrieved the first name from the state the last name from the state email ID from the state and I just you know uh added console.log.

We can see the form data in a console alright guys we have almost completed the item file form and the event handle event handling for input fields and form submission all right now let’s save the form and let’s go back to the browser and let’s see if there are any errors or so before that let me check if anything missing over here so we have added a change first name handler and we have you know we have just bound that event handler in a constructor and similarly for change last name handler we have also we have bind this event handler in a constructor and let me change the name.

Let me check if anything missing all right we’re good one more thing is this is a canceled method we haven’t created a cancel method over here so let me create a cancel method and then once we click on the cancel button this should navigate to the employee list page right and let me just copy the routing URL go to the list employee component and let me copy this all right so here let me change the path URL like employees so whenever we click on cancel button this should navigate to the slash employee, uh you know URL and so the least employee component will get rendered on this URL.

Let me save the file and let me go back to the browser and let us see if there are any errors no errors all right let me just refresh yeah here we go we have successfully added the employee page to our employee management application let me hit the cancel button yeah we can go to the employee’s list page all right now what we’ll do we’ll fill up the details and we will be able to see the data is available while from submission okay great enter first name as Ramesh the last name is fourth array email address as oops here we automatically get off last name uh in our email field.

Let me go back to the VS Code and let me change yeah here basically it is email ID let’s save the file and let’s go back to the browser and let’s refresh and let’s again enter the first name that remains the last name for the email address as ramishit3m.com hit save and let us see yeah here we go we have successfully got the first name last name email ID data from the state of the object.

Related Posts

Leave a Reply

Your email address will not be published.