Call API in React Js | How to send data from frontend to backend react

hello in this video i'm gonna show you how exactly we can call some apis in react.js some sending some data to the server and get it back from the server in this tutorial i'm gonna use actually a locale a project for my server it's hosted under a localhost 2001 authors you can see this is the list of my data that i want to fetch it and this is my project i have a button if i press it i have to write a logic to send the data and then i can see the list of added items here in list for my project structure it is completely simple i just have a component here named app and inside the return section i actually just rendering some data it's coming from the author list and i adding some html elements to show the list of authors and i have a list i'm storing it inside the state and here is my mac data it's such a simple array of authors which are gonna remove it later and fetch it from the back-end side instead so the first question that we need to answer that what is the best place that we can put our data actually here my case is when the page renders for the first time then i want to write my code to get data from the server side the best place for is is the use effect a hook actually if you are using uh class components you should use component d mount instead so the signature should be exactly the same we shouldn't add anything here to this array because if i added this function and there's again whenever this variable changes so i don't write anything inside it for now i just need to create a function it should be asynchronous because the operation that we are doing takes some time so it needs to be asynchronous so i first going to create my function fetch data async and then just a simple arrow function here i'm going to call the fetch api which is supported by most of modern browsers it is very good and perfect for any kind of queries that you want to have the first parameter is the address that you want to get data from i'm gonna use this one paste it here and i have to store it inside my variable result evade fetch then when i get it i have to convert it to json because the structure that my data is in my server it is json but it's formatted in a strong way so i need to convert it back to json so comes json result and result dot json so then i have to set my authors i'm gonna remove the previous one so the data should be empty from scratch and then i get the list of data from the server and put it inside it so it will be rendered here inside my map function so the only thing is to fire this function fetch data so when the app runs react first render everything the page is ready then the use effect function will be called then this fetch data function will be called and it will run the fetch function its field goes and get the data and convert it to json and set my state so my app renders again and my list will be rendered and show to the user let's see if it's working or not here we have a problem oh actually i forgot to put the ev8 syntax here as well because it's operation that takes time so let's see again yeah as you can see it is working fine and i have list of my alters rendered completely here so let's go for the second step which is actually when we press the submit button we want to add a new author to the list and also stored in the server so i have a button here as i said it is the callback function for it and i'm gonna write my logic here so the first thing is defining my data that i want to send my data we can use for example this one from here and i don't need to send id i just need the avatar avatar full and the name we can have user4 and let's write our logic to send this data to the server comes result again the fetch function the same location for api and the second parameter this time we needed to specify the data that we want to send and some additional headers which is required the first important one is the method it should be post because we are posting data actually the second one should be headers and it's going to be an object and within it we will have content type should be equal to application json and the last one is body i have to convert my data from json to string and then send it so i can use the json function stringify and pass the my data to it and then i have to again convert my result to json so evade without the json then i can console to see if it's working or not so i'm gonna open my network tab here to see all the requests that are sending i press this one you can see a new request is here no content oh it's the option one this one is important payload this is the data that we send and the status code is 201 which means that the request is done completely without any problem on the server side and inside the response you can see this object and if i open it this is ready so i can append it to the end of my list because here it's not added if i refresh the page it goes and get the fresh data we can see it now but we want to when we press it later we see it here without refreshing the page it is so easy i just need to set my state here i get a previous value i create a new array i first put the press value and then put the result in json so let's see if it's working or not let's make a quick change here to my data to identify it easily press this one user 5 is completely added to end of my list so you saw that in this example how we can send data to the server calling apis and get it back from the backend site i hope that this was useful to you if you enjoyed this video please leave it a like and write me comments i'm gonna read everything and provide better tutorials for you in future thank you very much have a great day [Music] you

Channel: React with Masoud

Views: 42,620

Keywords: call api in react js, how to call api in react js functional component, api call in react js using axios, redux api call in react js, How to send data from frontend to backend react, send data in react, reactjs fetch request, reactjs fetch, javascript fetch react, post data to api in react js, how to post data to api in react native

Id: _qIdC1N2qcQ

Length: 8min 52sec (532 seconds)

Published: Tue Feb 08 2022