React tutorial for beginners #56 Update Data with API | Put Method

hi everyone welcome back to my channel my name is anil and in this react.js video tutorial we will learn that how we can update data in api with the put method and obviously we will continue our previous video because in previous video we i already told you that how we can just populate the data inside of form right here you can see that on a page load we are getting our first record inside this data and after that let's say we just want to update any particular record let's say you just want to update batman then you will click on a batman and you will get this data inside this form and in this video we will make a put call for update the data and uh let's say we are just updating something here and then we will click on a uh update user button and then our data will be updated from api also and this is our api here you can see that batman tony stark xyz and ilcido and peter and all these results are plotted here and we are working on uh apis since four or five videos so you can watch our previous videos also if you did not watch that right because they are really important for understanding that how it actually aps are working so first thing that we are going to do in this video we will update our these fields data because let's say i am just want to update my twitter data so my data is populated in the form but i cannot edit it right still you can see that so how we can edit this and till now this functionality you can watch our previous video so now what i'm just going to do i will update the state here you can see that we have uh some states here like name email and mobile and these are mentioned here and updated on this thing on a first load then select user also right and now what i'm just going to do i will update this state on change of these field right so just write here on change make a arrow function and use your set name because this field is related to the name and pass here event parameter a and this parameter as you know is a very powerful and it have our values also so just write here e dot target dot name and now our state is updated on every key change so with the similar way i you can see that whenever i will just okay just let me refresh it once right um just give me a moment i think i just missed something here let's check yep actually that's that's my bad i have to put here value because we are getting a phone value here right so now you can try to change it so now you can see that i can just change this field but till now i can change the other fields also right so now let's do the same thing for other fields also so just copy it from here and paste it with email address as well as on mobile also and just change here simply set email and set mobile and now you will find that we are able to update this all fields right so let's say i just want to change something here dot in and mobile number let's say double one double bond and just select when any others like x y z and just change here like uh uh bruce and uh bruce or something now you can see that we are able to just change all these fields right so uh now on the click of you update user i just want to collect this data and send insider api so let's do it first of all i just need to create a function on it so that we can just call this function on click event right so just define here on click event and let's make a function with the update user and just directly coin this create this function here function this one and now what you can do first of all let's check that we are getting the updated things or not so just make it console dot one and inside this we will just print or values and all values will be there like uh item and inside item just get all these values name mobile these all are state right and then email and one more thing let's try to check that what we are getting in user id is it working fine or not and just print this item here like item all right so just come back here and try to print something so i am just want to change beta and whenever i will click on it now you can see that we are get get the beta data like id and everything is perfectly fine so now let's just just create a put request and put request is really similar to the delete request so we can just copy it for a moment right so that we can save time because all we already learned that how we can create the post request get request and all so you have a better idea for a moment and we can save time here now let's uh put your request here so as you can see that we have to pass here id that what result we want to update all right so for that what we can do here now you can see that we don't have any id parameter for a moment so just simply put here user id because user in user id we have the updated record and this is you just we just seen that inside this console so that's all and now just change this method with the put and we must have to define two more things one is header so just add here some headers like two things except what we are accepting we are accepting uh json data so just write here application json and for the similar way we can just define that what data we want to pass so just write here content type content type and uh one more thing now that we need to just send here body and in the body we will send our all uh email id mobile and so uh sorry name mobile and email id and we don't need to send your user id because this is already given in the parameter so we can just remove it and now json dot stringify and just pass here item because when we will just send the data we must have to convert this object to the stream now everything is fine and uh but now we can just send a request if everything is gonna find then our result will be updated soon so let's say i just want to update this xyz record just click on update we got the data here change here bruce and mobile number let's say 1010 and just click on update and now you can see that we got the data here updated data and let's check here uh did we just update the xyz result now this is also updated here let's try to update some more so i just want to update the tony stark because there is some captions problem tony stark and just simply also try to add update email address down here that it start and this is still working fine right so with that way you can just uh update your uh data with the api and obviously we are just create a one video on that but in the upcoming videos we will learn that all these things inside a project also so thanks for watching this video if you still have any kind of confusion you can ask me in the comment box bye bye take care for a moment

Channel: Code Step By Step

Views: 72,720

Keywords: react tutorial for beginners, react js rest api tutorial, react js put method in api, react js put method, react js update api, anil sidhu, react tutorial

Id: TQtAtBJeiPc

Length: 8min 37sec (517 seconds)

Published: Fri Dec 18 2020