How to send data from Backend to Frontend in ReactJS in 2023 | MERN stack

hey everyone welcome back to another video in this video I will show you how to send a data from backend to front end in the fjs so if you remember I have made a video in which I show you how to send a data from content to backend and if you want to see how to do that you can check that video I will link the video in the description but in this video we will see how to get the data from backend and show that or display that data in our front end with the help of the fjs so uh let me just show you what I have written here so first of all there is some app.js as you can see here and I have write the home component here so let me just show you the file structure here so you can see in the SRC tag I have a component file in which there is home.js so there is a single file home.js and then the app.js is this one and then in the back end let me just close this SRC file in the back end we have mongo.js and I have written uh like initial setup code not all the code here so I will be writing the code so don't worry so this is some initial code for mongodbjs and it is very simple and some code for server.js also okay so I have written some code for server.js also the initial setup code so let me just show you in the home page let me just uh start the app real quick so after like writing uh these servers and front end code you have to like on the server and front-end both so I will click on this button here and it will show two terminals so in the right one I will write node mon server ok so this is to start the server to start the back end so I will click OK enter and you can see it is displaying Port connected and mongodb connected and one more thing I want to tell you make sure to download these packages so you can you have to download these all packages in order to not this one okay or remove not this one so we move this Firebase not that one uh so yeah these all you have to download in order to work with back end and front and both so let's close this and after connecting the backend I will just write npm start to start the front end also all right so as you can see we have our home js on the screen right here and you can see there is a simple input tag in which you have to write a name and then a submit button so let me show you in the home page whatever written here so you can see in the HTML I have a form and an input tag here and in this input tag has a on change event so this will change the value of the name whenever you will write something so this you state you can see this name variable this will change whenever you will write something so now let's start writing the code to first uh send the data from front end to backend and then we will see how to get the data from backend to front end so to send the data from front end to backend I have already shown in the previous video but I will show now also so first of all what you have to do come down here and make an async function so I will write async and function here so make sure to name this function async then I will name the function submit you can name it anything then I will write e Dot prevent default okay then I will write try and catch blocks so I will write try and also cache blocks here this will take an argument and this will be so this will display the error if there is any error so in that a try block I will write await and axios all right and make sure to import the exeos before writing that so I have already imported the xvos so I can easily write this then I would write x0s.post and here you have to write HTT P semicolon double slash localhost and then your port number so if you just see in the server you can see the port number is 8000 so I will write exactly that so make sure to write the same number eight thousand and then you have to write the name of your like post name so I will write here send data you can name it anything but make sure whatever you will write here so I have written here send data then I have to write send data here also so we will see later on what I mean by that now what I will do I will mirror comma here and a curly braces and inside this I will pass name so what we are doing here we will just now pass the name to the back end that's it and and here I will make an on submit button here and this will be submit so whenever the form is submit uh this function will occur okay then come in the server.js and in this you have to write app dot post then the name of that post name so I will write here send data so make sure to write the same name and make sure to write a Sync here also because it will be also an async function then request dot or the request comma response and it will be an arrow function now we'll get the name okay so whatever name I will write in the input I can get it here in the back end in this way so if you know uh like if you know how to do this skip to the part where I told you how to get the data from backend here I am sending the data to the backend first then I will like get the data from backend all right so it is giving me an error okay so this will be in comma here not DOT and after this I will write another try and catch blocks in the back end also so just like that try and catch blocks this will be this so oops uh e all right and in that try block I will write const check or not check or let's say const alert notes write counts so I will write await and then collection so collection all right so if you just look here I have already required the collection from mongo.js so make sure to do this so in this way I will just require this collection from mongodbjs to our server.js and now I can just write functions to insert the data so I will write insert many it is a function in mongodb to insert the data I will write name equal to name that's it so it will and you can see in the mongo.js I have a scheme of name so it will only take one entry which is name and I will or that's what is given either okay so I have to write this in a curly braces so yeah just like that so so just save it and it will so this is the code to like send the data from front end to backend so let's just quickly test it and then we will see the our main code here so we'll write here user one so this is a name and let it submit all right and let us see in our uh terminal so nothing is there so that means there is no error and now let's see in our mongodb Compass so open your mongodb compass and there you will see the data okay the user the one which I have just now entered so click on connect and see your database on the left side here so let me show you what are the database name so you can see the database name this back end to front end so so here you can see this is there it is back into front end click on this collections and all that so it is showing no data so that means there is something wrong here so that data has not been submitted correctly all right guys so the mistake was I have written the spelling of this prevent default wrong so I have to write here e now everything will work fine let's test it real quick so I will write user one hit submit and now let's see in our mongodb Compass here so yeah as you can see our name is there user one Let's test this again so I will write a John hit submit let's see our mode you can pass so yeah it is working great now uh let's like take the data from backend and submit it to front end so now the real video begins so to do that and also I have written here some then and catch blocks you can see in this away text Jos so uh first let's write some code here okay so what I will do here um whenever I am inserting the data I will make an another constant here and I will write here all data and this will be equal to await collection and collection Dot find and that's it so in this way it will find all the data in that collection and this collection and this all data all the names I have to give to the front end so we will do exactly that so we will collect all the names from this mongodb compassion and pass it to front end so how to do that very simple you just have to write this dot Json and then all data that's it you are done okay so you are giving all the data from the back end and passing it to front end all right so this Json is the way to do that now let's save it our backend work is complete and let's write some code in home.js so here you have to write some code what I will write here I will write if okay um if Json dot so is if this dot data so how to get that data you have to write uh this dot data okay so if it is equal to fail and to get this I have to write fail here also so here if anything goes wrong I will write this dot Json and fail okay so if anything goes wrong I will just pass fail and I will catch it here so if anything is failing I will alert the user and I will write failed and if that doesn't happen so that means everything is great then we will set data okay so we will first we will make a new use state okay so this will be data and this will be set data and it will be an array and here we will set data equal to press dot data that's it so what we are doing uh if everything is great we will just like give the data to this set data and in this way all the names will be inside this uh data array and now what we will do we will just we will uh display all the names so to do that I will write data dot map so we will use the map function here an arrow function here P tag and then I will write e dot name make sure to write curly braces e dot name all right that's it so we are done with all the data and we have successfully uh like given the backend data to front end so let us test if it works or not so let me actually reload the page I will write here new name so this is the third name we are giving so let's hit submit and yep as you can see all the names are now displaying here so that means we are successfully getting all the data from the back end and displaying it in this uh here so if you just noticed user1 and John are displaying two times let me just make sure in this one all right so yep as you can see they these are five times l so five data let me test one more time with you load the page and if I just write let's say James submit here all right so it is working great okay so now there are six entries all right so yeah 600 so it is working great so that's it we uh that's it guys uh I hope you enjoy and learn how to get the data from backend and send it to printing this is very easy you just have to use this service dot Json all right and this will automatically send the data to your front end and you can get the data with the help of this then in Cache block so I hope you learn something new and if you like this video hit the Subscribe button it will be very helpful to me and let me know in the comments what videos you want next what type of videos you want next and that's it for this video guys I will see you in the next one foreign

Channel: Techy Web Dev

Views: 1,754

Keywords: mern, react, data, backend to frontend, 2023, nodejs, mongodb, axios, cors, mern stack

Id: 47rXJN5r5kc

Length: 15min 36sec (936 seconds)

Published: Fri Apr 07 2023