Axios with React JS | Post Request to REST API

hi viewers welcome to youtube channel i am harass khan in the previous lecture we have learned how to get request using exuse with rick js so we did this in the previous lecture in this session we are going to learn how to post data using axios in the reac js so let's get started in the previous video we have used uh this just replace holder which is a free fake api so we use that fake api for getting request so today we are also using for posting this as well so as you know are we can come over here this is our previous data ignore these title and body let me tell about that in a while this is something we have got i didn't do much but just it ah standing here as a border so that's why it's look a little bit better than the previous so here's we have uh get we have displayed title and body now we want to post title and body i mean the date of the title and body using x use means somehow we can say that the post request with exist how we will do this in the v8 js so guys i have created this simple uh html uh input title and body and a button with the post so when i click on the post so the function will be called and in this function i will use the x use post which will post our data on this fake server which is a json plus holder so here it's a simple code you can see of inside the form label and put peel here is a title i have defined the hooks above and set title will change the value mean on change event will occur so the value will be changed it will be stored here in the title same is the case for the body let me show you the hooks these are the two hooks i have defined over there over here the title and set title you are familiar with these stops that's not something we are learning but if we look at here in the bottom on click i have called a post post data function which i have defined above as you can see here now and here i have written e dot premium default so it will be uh not reload the page once i click on this uh post button so now here we will define our code as you can see above is the use effect hooks when the component uh did mount so then what will happen the data will be fetched using gate request but here we are posting so we will manually post it by defining our own function as we have defined post it so let uh start i here i will write uh xu's dot post and the url is similar i also post data on this particular so here i can write control v these things so here are the two way to pause it either pass it one by one like that define here is an object and right here title and body so if we have different name for example the name and the front end and the name on the server this is the name on the server as well as the name on the front here so that's why i have just written title but in case if we have a different name that is for example in the front end we have a title name with a capital t so then we will write like this as you know and if we have the same name then it's called shorthand we can write it as a title so these are actually the two attribute as we send in the fetch request you maybe know about the fitch so uh which is a built-in we can say in the uh react.js so now it's also written promises so if we have uh we can say then and the response so we can console log the response so i would say [Music] i can say here posting data and here the actual data will be what's going on so i will paste uh what here the response will be so the response will be displayed over here and now we have a cage so for the case let me copy this thing there is nothing tricky so control v so now control s and let test test so we will see the response in the console by preceding posting data if there is any error we can also log it so control s come over here and inspect because to see the console write here a data for example title testing and body testing you can see there is nothing on the console but we click on post as you can see posting data and status 201 and its id should be 101. as you can see here the data title body testing sorry body body testing title title testing i have written the spill long over there that's why it's showing here wrong and id is one zero one so it's been it's working we have successfully post a request we can say post data on the fake server so off you have got this in reality it will not be stored in this fake server as you know there will always be only 100 i mean whenever we access this there will be 100 post but if in case it's your actual server so that data must be there and you can access it uh anytime and that will be there till there tell its deletion so here is another question that how can we do deletion operation using x use how can we delete so in the next lecture we will learn how to delete using axios so i'll meet in the next lecture till that is

Channel: Code Splitter

Views: 51,174

Keywords: how to use axios with react, react with axios, react, react axios, axios, axios with react, react axios get request with headers, react axios http request, react axios get request, axios react, react tutorial, react axios post request, react axios put request, react axios tutorial, making a project with axios and react, react axios cors, react js, axios react hooks, react axios crud, react axios get json data, react axios api tutorial, react js axios

Id: pQibzAjverE

Length: 7min 20sec (440 seconds)

Published: Sun Oct 03 2021