#93: Add Data to Real API & React Full Stack App with Axios POST Method

Learn how to effectively use HTTP POST requests in React with Axios to add data to a real API. This tutorial walks you through building a form component, handling input values, and updating your React app's UI in real-time after submitting data. Ideal for full stack developers looking to enhance their API integration skills.

------------------------------------------------------------------------
🚀 Boost Your Skills with these Pre-Requisite Videos:

------------------------------------------------------------------------

------------------------------------------------------------------------
✌️ Join Us!

------------------------------------------------------------------------

⌛TIMELINE⏳
0:00 - Introduction to HTTP POST Method with Axios
0:20 - Demo: Adding Data in a React App
2:20 - Building the Form Component for Data Submission
6:30 - Creating the Function for HTTP POST Request
8:30 - Handling Input Values and onChange Event
13:40 - Managing Form Submission in React
15:30 - Adding Data to the API & Updating the UI in Real-Time

[KishanHingu]

Thank you Sir❤❤ Mene appki complete react, react-router-dom & axios ki help se Mene real life project Thai-lotter Web pe as freelancer kam kiya without any experince. so i really thank you sir❤❤

[MWaqarattari]

Sit ap itna hmary liye kr rhy hyn plz last week ki live Class css ki and mongo db pls ye live py upload kr dyn ta k bad myn b hm dekh
Skyn

[Info-Pirate]

Aoa Sir, plz converging this playlist into one video, because it to difficult to download and manage such a large number of videos

[Coding_Master_]

Amazing Video .. 🙂 but sir ham isme data add ker skte hai to fir ham local storage ka use kar ke data ko permanent store kyu nahi kar sakte ? jesa Todo List mai kiya tha .

[musazahoor]

12:56 : instead of using (prev) we can also use => setState({...State, [name]:value}) ! ????

[kushagragupta]

Your website
Thapa technical is crashed.
Courses page not able to load and I am suffering problems there.

[musazahoor]

everytime we add new post its id remains 101 ?
how to fix it

[shamsliaqat]

if you add two cards then there is an error in the console please fix the problem

[hingukishan]

Helli sir react authotication valu bhi karao ge

[hingukishan]

User login ho tabhi dashboard open ho wo bhi sikhna chahte he

[minhazali]

sir in your code there is a problem for the id. that's why i wrote this code to remove that error:

const addPostData = async () => {
const newData = {
id: new Date().getTime().toString(),
title: addData.title,
body: addData.body,
};

const res = await PostData(newData);

if (res.status === 201) {
setData([...data, newData]);
setAddData({
id: "",
title: "",
body: "",
});
}
};