How to Update Data in React JS | Edit Record/Data using React JS

hello everyone in this video we will perform operation um functionality in react.js okay these are the three cards that we have so we would like to update this record okay so update this I upgraded this design and whenever we press this update button so we should update this record okay I hope it's the data from this Json file this is a Json file which I already created and then I run the Json okay the Json file let's check it yeah this is the db.json file that I hope is this records and I have used this package Json server okay and it works like a fake API okay we can test our application with it I awarded a created this application you have linked for this application for this Cloud operation uh in the description okay in this video we will just perform the updation so first of all we will come to our home page okay in our home page we will come to the update button okay and also I used axis and reactor down with this okay access for to pitch or post the data and the reactor data for routing so let's come here to our home component inside the home company this is the data that I have pitched okay in use effect I face data from server and then they enter that store that in this variable then I displayed that here okay in map function and here we have this update button okay so now let's change it to our reactor to Dom okay to change it to the react Auto down we should change this button to link because for the reactive total we use Link and also let's add two is equal to this property we should goes to where we should go to update update Route slash we should pass our ID okay to pass ID we will write like this uh sorry clean this okay now let's come here instead of this let's write like this we will pass our ID D dot ID okay this is our this object that we have okay every record it give us and we will check the idea of that and we will pass to this route update Route so now let's move to our yeah let's come here so here we have the update Route okay this is the route that we have created for updation okay this route we have all locks here in update j6 this is for home this is for create to create an element record this is for update okay update then we will get an ID here okay route okay and this is for it so we will use this route so whenever we press this update button we will come to this route and here we will go to update component so let's move to update component here to update inside update so first I will add some code let's check it okay first of all test our update let's press this one so we came to update okay update component so now let's uh whenever we come here so we should be first of all display a form here and we should pitch that record that we have clicked and that okay this record we should display that in forum and then we will update that so for that let's write we will create a forum and we will rock The Forum and we will how to for Fields per our name for the I am email so I will just create the design so I wrote this design okay I have a forum and we have two input fields for name and email in the update button okay I used both soft classes for this to design it let's check it how it looks like let's press for example this one see it looks like this this is the design which I have created okay so now we should get the data that we would like to update okay in this name and also in this email address so how to do that so for that we will use a use effect hook to fix the record [Music] we have imported that certificate function let's write a redependency inside use effect talk so now we will pitch the record base and the ID that we passed okay we passed an ID so let's check it we have this idea okay this so how to grab this ID so for that we will use use Forum hook of react router down we will light const ID is equal to I use Forum this see it will be imported from reactive to Dom so it will grab the ID from URL okay it will assign to this ID variable so now we will access a record based on this ID so we will write axis that git and our URL is let's check our URL this is our URL plus we will get paste an ID plus ID okay this ID regard we will get from that server so after that we will get a result and if there was any error so catch that we cancel that so whenever we get a result so let's write that we will get this result so for by default first of all we will cancel that okay console.log result what we are getting so let's check it first of all Okay so yes let's come here let's come here best in update yeah let's move to the console what we are getting because we can sold that so let's come here to the account see if we got this object see in this subject we have this the ID was ninth okay this ninth and we got this data dot email ID and name these are the data related to that ID so now let's we should display the name and email in these fields so for that we will create an object and we will just simply cast values is equal to use State hook we will use and we will create an object ID the ID is the ID that we have and the name Name by default that is empty and also email that is empty okay so now let's update this name and email so for that I will write sit values we will create an object the previous videos and we will update name is equal to with the result.data dot name and also the email is equal to with a result.data that email okay the data that we got result.data.email.name yes we updated the data so now let's assign these values these videos to these input forums these fields okay so we will write value is equal to with the values that name and also for email we will write like value is equal to values dot email so let's check it that we have the rights we get this that data okay that is the warning so let's go back increase for example on this one let's see we got that data name and email so now we will update it whenever we update it make a updation in this so for that we will like this code okay so whenever we are changing this data so we will call unchange event on change equal to 2 here we will create a function yeah we will just create a function got in event and set values we will call that our data values the previous videos and here we will just update the name name is equal to with e.target dot value here we will just update our name and same for this we will use for the email use your email before we were not able to update so now let's check it can we update that or not so let's write something see we can update now update the data okay just we will add this add this okay so now we never refresh this update button so we should update this record so let's come here by pressing this we will call on submit event here and the Forum and submit handle [Music] submit let's create this function const handle submit is equal to we will get an event here just write e dot prevent default it will prevent default submission default and after that we will call the API by post and we will just pass data to that so let's simply copy this and write it here and we will just use post method instead of get method post and we will use this URL and also the ID that we have and after that we will pass our data to this the data will be will use with us okay these values that we have this video the updated video so after that whenever we get a result so we should go back to our home page so for that we will use use navigate hook okay to render back to the home page const navigate let's import that use navigate okay this will import it from reactive to Adam again put it back to the home component Home Route okay go to this route it will go to home page so now let's go back and here we will press the update let's update it and right here something yes let's press this update uh nothing happened so let's check it and submit to even your Vista update and submit here little submit okay we will call this e Dot prevent default it is okay kit so part of addition we should use put method okay not post okay sorry that was mistake so now let's try it so let's update it yeah we updated let's add it this data this update see let's check it see that it has updated see that a card has updated let's update another one let's remove this from that and also remove this from that let's update see that has updated the record so it was all about updation in react Chase I hope this video was helpful for you if you like this video don't forget to subscribe our YouTube channel and thanks for watching

Channel: Code With Yousaf

Views: 58,619

Keywords: update record in react, react update record, update data in react, react update data, update object in react, react object updation, update table in react, edit data in react, edit form in react, react, react tutorial, react js, react js update api, react js tutorial, react hooks, how to update data in react, update record in react js, react context, react hooks tutorial, update data in react js, how to insert update delete value in array in react js

Id: CUyU_ySLnIM

Length: 11min 50sec (710 seconds)

Published: Thu Mar 30 2023