Axios Post Form Data | Post Form Data using Axios with React JS

hey everyone in this video we will make a post request using axis library with react cheese I have already created this design so we will input data here then we will click the submit button to post the data with access so first of all I will import the XCS access from axis now I should handle this input values so okay I will call here the input field here and on change and I will cross handle and put this function I will call this function and let's create this function const handle input and here I will have in is equal to in event here I will just first of all before handling the input field I should have a state in object okay to pass that const Center Post is equal to use State I will use use datehook and I will create an object the object should have title and also the body for recording to pass this post data I will use this API okay Json placeholder placeholder post okay I will pass a post to this API and I will update through this data that I am passing so first of all let's handle and update this data okay by handling and this change window will be and putting data so I will handle that they are enable update this object so I will calls it post previous post and also now I will update the post event Target dot name the one I am in which I am inputting data in the title or the post it should be body okay simply this and update it to the event that Target dot value after updating the video so now whenever we press the submit button okay this submit so we will hit another function to post the data function handle submit and you will have an event here first we will prevent the default submission for event font and now so let's call this function here and submit we will call and then after this what we should do now we will create an a post request okay access using access dot post and our URL the URL is here I will copy the URL unless this here and also we will pass our data the data is the post object with us dot in in the response what we will get we will get a response and we will handle the response just I will print the response in the uh cancel s if there was any error engage it so let's try this example the server is running okay so let's come here we have this design leads to the console foreign [Music] title would be let's press the submit button what happened uh see it I press twice that it right now we have this data the data we have the ID is 101 and the post and let's stick the content and as the header so the reason that we didn't get our data so let's check that um it is video sorry so let's check it now let's press the submit button I have printed that before so let's check the data and this is because of this console I wrote okay I will remove this and the data that we get this is the response that we got okay re2 we have to let's check the data see it how to and post the data we have posted this data so it was all about how to post a data or use a post request with axis in react.js so if you have liked the video please subscribe our YouTube channel thanks for watching

Channel: Code With Yousaf

Views: 32,041

Keywords: axios post form data react, axios post form data, post request in react js, react axios, react, axios with react, how to use axios with react, react with axios, axios, react axios post request, post data with react js, react axios get request, axios react, api call in react js using axios, how to post data to the api with react js, react axios tutorial, react axios cors, react axios api tutorial, react axios put request, react axios crud, react axios http request

Id: LW23zgE_2Cg

Length: 6min 22sec (382 seconds)

Published: Fri Feb 03 2023