Put / Update Request with Axios | Update Data with Axios and React JS

hi everyone in previous vacated post request and also get in this video we will make a put put request to update the data using access library in your packages so I have already created this design see it we have this design so now first of all I will use an API Json placeholder okay this API I will pitch the first record from this API okay will I pick the first card I will show you that a card then I will update that regard so let's do it first I will import the axis import axis from axis so what should I do first of all I will use use effect hook the dependency here I will pitch the first record from that Library I will use access to navigator the URL I will use this URL slash one okay the first quote from post from this that dinner it will print that for us inside data data just simply I wrote this so let's first of all we will check this let's come to the console with c we have this data user ID 1 id1 and this is the title and this is the body okay we have this data that we hope it's so now we will update this data this first host so while I'm entering the data so first I will catch that data I will use on change event here and change even handle input the same for the second one and I will create the handle and put function now we're going to triggered with this let's um so therefore now to state to store this data we will create a state variable const set post is equal to use State hook and it will be in objective and we should have title and Body in that let's update our post now so to update the post we will use sit post and we will use the object previous post and also the new will be posted event dot Target dot name if you are updating the name or the body so it will dynamically change that so event Dot Target dot value so after after storing the data in post now we will update that probably that we will use on submit event here whenever we submit the four and submit handle submit let's create that and I'll submit if it will come with this so first I will prevent the default submission and our videos access library to update the record photo I will use the put method and access and let's copy the API the URL let's put it here and the first post we would like to update and here we will pass the data we have this post object okay this is and again then we will get a response result and let's write that result that console.log please pause dot beta and if there was any error so you will find that so it was all about this so let's check now so first I will press the page by default we get this data update data okay so let's press the submit wait to get the result okay we got this result C8 id1 okay herea so the ID was one and also we have the ID one and the title is how to update but here the title was this and the part is data with xlip but here the body was something like this so it was all about updating the data with the access library with react.js so if you have liked this video so please subscribe our YouTube channel and thanks for watching

Channel: Code With Yousaf

Views: 13,875

Keywords: axios put request react, axios put method in react, update data in react js, update data with axios, update data with api react, update data with api put method, axios tutorial, get data, fetch data, put data, update data, delete data, axios react tutorial, axios in react js

Id: HcvuK7og2-k

Length: 5min 50sec (350 seconds)

Published: Fri Feb 03 2023