Axios with React JS | POST | GET | PUT | DELETE requests to Rest API

hi viewer Welcome to our YouTube channel I am haresh Khan today we are going to learn crud API integration in react.js using xeos Library so let's get started as you can see on your screen I have a basic form of current operation like we have full field here user id id title and body and a button submit and the data which will be submitted should need to be shown below for example I need to submit and let me just fill out this with the random data so item body if I submit this URC you can see the result below here as are rendered in the table this is just a bootstrap simple form I can also edit this as you can see and on click on submit and get edit let me do it again for example change this ID click on submit I can also delete this so these credit operations are now handled using simple state in react.js but we have to put apis behind it and for uh getting data from server and posting data on server we will use xios Library maybe you are familiar and you have used the Fitch which is a built-in in react.js while xeos is our npm package we use in rig JS so let's get started first let me uh I summarize the code I did for this simple form that you have a basic ID of it look this is a simple project in the ape.js file I have called a component with the name current and this is inside the pages that is scrub.js and there is nothing here's few states in the form like you can see we have HTML form I use bootstrip CDN bootstrap CD natural direct package npm package so these series are include of the bootstrap come to recruit.js so this is the text I have brought here you can see I've written here let's learn react sorry current API integration it is using X use so this is the text after that we have a form inside with Devo we have a user ID I just go through this because you are familiar with this but must have a little idea of it because we are doing the we are using this form to integrate uh the credit operation so that's why let me summarize it so ID Field title field simple one change title you are familiar with all these steps because it's a core components I mean a fundamental of for react so this is our submit button and below this we have a table bootstrap table which I have made the data so let me explain first here let's if I click on the submit so which function get called look here we have a handle submit function which could call what's inside this it's check it's prevent if there is empty Fields so if the user id id and title in body if you got all these three field then we do what then we click then we set our state with a form data and what is form data so look form data is the initial data as you can see the initial data of our what of our form which is empty initial user ID title and body so look in the handle submit which is called submit button we do it we send we first extract the Sid data mean the form data we will use form data for initial data and data in set data for uh new data for example I clicked on submit button so the data which is inside the firm should need to go to the Sid data and which I have made here let me show you first the set data State as you can see here a data and set data so when I film the form so the set to sit data the data which already inside this gets spread and the new form data get can catenate with this data and set data to see data our data State get updated and we render this data here like data dot map inside which we have a user id id title body and then edit for edit and deleting purpose we are sending indexes here because it's we are controlling through State that's why we are sending index for the real uh apis integration we will use ID for the edited deleting purpose you are familiar with so if we click or delete let me bake come to the handle submit function is used let's here so set data get updated the set data and sit form data again initialized to the empty data so uh now come to here come down after we have here edit handle edit function so look you click on the handle edit function it call a function which uh get the data of that particular index we are sending to the handle edit function in send it to the initial state which we are used for the data displaying form that is set form data which are initialized by the initial data so here we initialize using the specific index data because to populate the field with the edit data that's why we are doing this so uh and for the deleting purpose handle delete function is gift card we have filtered that particular index record and send the remaining two set data because said data are Mapes those data uh and nothing else there is just we have console log the data inside the use effect whenever data gets changed use effect will mean component will update and that particular console log with update data get displayed on console so this is the basic form let's start the API integration we will use here a fake API for this purpose to do the current operation that is Json plus holder which is a peak apis uh yeah free pick apis here we have a multiple options we will use post one to get post to post post to edit post to delete post so we have a basic URL that is uh jsonplaceholder DOT type code.com so look here if we click on the git we we can get all the post uh through Json plus 1.4.com posts so this is the data from slash posts and if we want to a particular post we'll pass ID up to that of that particular post so let's get started this integration using axios Library you are familiar that it's a promise page HTTP client for the web browsers and node.js so its main purpose is what you are familiar that make XML HTTP request from the browser Mac HTTP request from node.jest and all apis Etc so let's get started using this as you know we first start from the post request to click on the submit and our day our data should need to go to the slash post API of the place of the Json plus folder so look for this purpose first we have to install XU switch I already installed for that you need to type a command yarn it axios are npm star xeos so up to the successful installation of this speech you can import it like I want X useful X use so now I am using it to post data for example here is I have a function uh handle submit and inside the form data I have the data object I am sending including user idid title and body so look I do what here I need to put excuse here I X use dot post triggers it will be post request XU dot post take to argument the one is the URL to which we will be posting the data and in a second parameter it takes the object we are want to send in our case the object is form data which data form data because the let's come here I am filling this form so this data is getting into the form data when I click on the submit so uh when I have user id id title and body all these field are not empty so this function will come and what excuse dot post so it's take to argument the one is URL and the second is form so now we have uh then engage if it's get success the thing will be called and if it's get error it will come it will cage in the cage block so let's uh then in the then I will get the response like that response Dot let me control log the response here first that we can see what we are getting in response so let me write here with the response and here response dot data so if I get any error I will be ah I will know about the error as I have to teach this error Inside the Cage block so I console log error so Ctrl s and come to the browser yeah let me let me refresh the page after refresh let me fill this field the ID should be 22 for instance this ID will be and that will be title and body will be like at some point so look when I clicked on submit so what's happened yes response we get response that's mean we called API successfully and we got the response you can see here what we send to it has been returned to us so uh there is a little difference in the ID ID card change because it's Auto generated ID to the placeholder let me click here on we have 100 record so the record we are inserting is uh which one is ID 1001 so the next record so that ID get updated so in our case we now need to send this ID because it's every send it will be rejected because it create their own ID with the ID so the rest of data are our data it's not the big deal we can also know about our response in the console and also in the network section as you can see here we have a post API called This is the header the API to which we called look this is the API uh Json plus folder.type code.com post its status is 204 the payload we sent can also be shown here as you can see payload we are sending payload as you know now we are sent two three four ID but it get one zero one because it's override this ID because they are generated by their self the ID which are coded inside the Json plus folder server which is a fake server don't worry about this that's a damn big deal and come to the response here we got this is in the response which also we saw in the console so the better option is to look the API response and APA call that it gets failed are successed inside the network section but you can also use console.log for it being a are new to the API integration so you can also use control so successfully we did the post now we do what uh we will do git API so to get all the data and display it here we will use what you know that in the react JS uh in the functional component we do side effect inside the use effect hook you know so here I did what we console log the data so let me call uh whenever the data change so data will become from API so look we will call which API get API this yeah this API with a method get so look um look here I will write X use dot get and I have the URL let's just take a one parameter here because we are not sending anything else we just get these firsts all the posts present inside the post collection mean table so look here also I will then leave in the next line clear so look error sorry response first we will console then we will display the real data so our data let me write here this is the text I write here will be there Place phones that data and then I have to teach a cage if I have any error so that particular error you will get displayed on the console screen so look yeah let me control s come to your browser our react app and yes the data has been you know all data displayed here on Console I have to render this data here so very simple I have a state you know this state as you know here we can also not update this thing form data which is the initial data we can also write here as a professional way to write response.data here data of the data says that you are familiar with this term hope so it's not defined here because we have to do it like this sorry for that I'll limit this console this so inside then we will do this and also uh will empty our initial state so this is what our post done with this so let's make to our get request so the set data is our main thing so we will do it after getting the successful response let me do same for this as well but I do not need to do the work of spread operation I just write all the data with this so respond to our data that all data get displayed here so I control s and data has been displayed you can see hundreds of data displayed we can also concatenate this data again and again by writing like this scientist here to spread the data which is inside prison it's mean that the present data will not be lost in the new data will get concatenate and then the state will be updated so with this we conclude it with a get request which is very easy we get the response and handle response according to our need like in the set data I handle it so now it's done to edit now it's time to edit so look the edits are performed here using which you know using so for the edit purpose we can also call an API let me change this to the index here to the ID so I will send this ID it will edit based on this ID column I will send this ID and edit will receive what will receive ID so I will first fetch the data for the fetching data I can simply use a git API like this let me control C this and let me write all these data so here um this index will be edit ID for instance I am sending so here I will post slash I have to pass Dynamic edit ID so for that I can also use Plus and then the ID but the better ways to use a modern way a big take I prefer this so you should use this backtake which is prints uh present above the take in sorry above the tape on your keyboard and below the escape button uh you can use this with a uh directly you can use big Tech so post slash I have to put ID so dollar sign and curly brackets inside I can paste edit ID so it will get me the result and that reset that response I want to speak to the set form data which is our initial data you know so I want to my initial data need to populate I want my initial data to be populated with the data I'm getting so look control s yeah control just handle edit let's check it directly without console if I click on edit uh uh yeah let's come here you know one one let me click on the two so yeah it's getting update awesome very awesome so this is what we just get the data for the editing purpose now we will post this data so we have no function for the Post data so that will be exactly same like for example we need a button here like submit we will have a button we will have done with the update update with update and there will be a function called click click we will call a function so the function name will be handle update for instance yes I didn't Define this yet let me Define in a while so look here inside a handle submit let me copy paste the handle post and change sorry and change this to the handle update let me remove all this thing premium default DTC I can put this condition that will be like that it doesn't matter but I will do it here I will change the method to put method to put and all this thing will be same like this but here I need to pass the ID exactly like what I did in this in getting data like this so let me copy this because we are posting We Are updating that particular record against the particular ID uh yeah why it's showing here because the ID is not defined this ID need to be sent as well so this is actually the um let's for that purpose we can store our ID as a global ID as well for example we didn't control it first so let me do a trick here you can play with this it might not be a good Approach at the moment but you can play by yourself as well so whenever I send in ID I will set a edit ID inside a state it will be item dot ID so I'm defining this state initially it will be edit ID edit ID but this is edit ID State that's the edit ID I passed over there for example now we have a global access of this ID so I can use this inside here I don't need to use it because it will fix this from that state so now here I can change its name that edit uh edit ID steps to make it change from there another one they both have a same value but this is what we have passed uh from uh to handle edit function and this is from this is fetching from the state which also updated along with this like here you know so now we have that uh this state edit ID now we can do what here in the handle update method and if we click on the update function uh here update function button so this API will get called with a put method and will update the record which is present inside the form data the result with this or we can say simply we can do nothing but we will empty the states or initial form data and we'll do what as you know we will sit form data with response are we can change we can indicate here a change or set refresh for example set refresh are reload for example refresh or plus one because to know the you are we can do a one thing more uh I leave it here like this state the initial state to empty and click on submit so I want there the updated data get rendered so inside use effect I will pass from that data as well whenever form that data get change there will null are undefined so that particular git post will get called use effect mean our data will be displayed so as you can see here we have an update button now if I click on this edit as you know data has been loaded here and I want to edit this before I want to write two two I write two and I click on the update so my data has been updated but it will not be displayed here because the new data has been rendered due to the use effect dependency array I can console log my data or see it in the network okay it's continuously calling because data is changing and state is get rendering I have removed the data from here here and as well as a form data because it will change frequently so for that purpose I need to Define here another state uh when the value of that state get changed so our data will be refreshed for example uh refresh [Music] state with application value uh true or false we can also use but let me use here a zero to increment our decrement it's really refresh I will pass refresh to the dependency array here whenever we need to refresh the data we will pass we will change the system data so when the record get updated and I want the new record to come so I will call this state with a refresh plus one so it will you will get change yeah and let me control s talk about the browser control the execution yes execution has been controlled now look if I click on the edit number record one and I want to put two behind it uh before it and click on the update as you know here um yeah as you can see here the response and response we get that it's updated as you can see two is put here before it and if I come inside the payload which we have seen exactly same and the headers you know this is the API this is the post method sorry sorry I think the method is not changed here it should not be post method which met uh update it should be update better why it's wrong here I think I click on the okay okay sorry sorry this one above one this is look HTTP 4.1 against the uh that particular ID which is one and this is a method put 200 success record uh success code we are sending this data as you can see two behind it and in the response we'll get exactly that uh updated data so it's mean we did with the updating as well so hope you got this how can we update data for the update first we fetch the data uh based on the specific ID and then we update the data based on specific ID so for getting we use get and for posting that update data we use a put method so we are done with this in this case our data get refresh and that render but the updated data is not displayed here because it's a big API we can't make change in it so it's uh get we get the all data which are inside this not the updated data so simply delete is not performing work on this but we will write a code for delete and we'll try uh if we have our own server then it will definitely work don't worry so for delete purpose also I sending here item dot ID because based on ID we will delete that particular record so let me pass this and delete is exactly same like we can say like git method like this let me control C this one for it and here Ctrl V the method for that will be delete and post slash that particular ID so the ID should be sending here delete ID which I am sending to the handle delete function you saw just before so it will get what it will show us the deleted result in the response but I think so the delete API is not working in this type in this API Json placeholder.typical dot post to X server so it deleted record I wanna deleted the card and response but I don't think so it will give me because I tried it it wasn't working there so if you are using your own server that might be node.jsr some other so you can do it uh mean it will work it will work in your case so let's try this here as well and I click on delete oh delete it record it means something happen it's work I think yeah delete for form and that particular record has been deleted type id1 delete status code but we did we got nothing it's mean that particular record deleted let me check only response and I click on delete yeah it is called so it gave us a empty because that particular record is no longer available it's mean it's get deleted it's a fake uh server so there is no message which shows that particular record get deleted and our state get updated so that regard uh present there because the data we are getting are are all those data which are present inside the pay kpi so that's all about crud operation in react.js if you have still any question regarding this you can comment so I'll try to answer you in the best way so hope you got this will meet in the next lecture till then love is

Channel: Code Splitter

Views: 7,200

Keywords:

Id: lsBDpQ9aQG0

Length: 29min 47sec (1787 seconds)

Published: Mon Mar 06 2023