React JS CRUD - How to fetch data from api in react js & display data in html table | React Tutorial

hey guys welcome back so guys we are continuing our react crud application so now guys in this video we are going to create a student page and fetch the data of the students from the laravel API okay and now guys this record only we are going to show in a HTML table format so now guys let's get started so guys let's move to our react Card application so now guys you can continue here if you have not watched this video how to install and set up the react crud application and the pages with the bootstrap are shown here okay so you can watch out the video link given in the description so now guys let's continue back so as simple guys let me close everything and now guys let's move to SRC and Pages inside that pages I am going to create a student.js file so student dot JS file and then create a function named as student and let's export default student and now let's return open and close bracket design with from the container part add a class name container let's copy and paste again row paste again which is going to be a column md12 and then paste again a simple card then the card header let's paste it again design a card header and then inside this header we need a H4 tag students list and inside this only hash Port tag I want a link for the add student Okay so give slash so mention as ADD student and now guys let me arrange this all set let me minimize here and now guys you can start with the card body here your form starts so before that here you need to import the link guys so import from react router Dom all set and now guys let us insert this we have to start with the table design okay open and close table give a class name equal to table hyphen table striped and then here you begin with table hat the head and then table row table heading which is ID name course then email and then phone and one edit option and another for delete option okay and now guys the body table body okay and now you are going to append the data over here so before that let us check the output okay let's go back and move to your react app so we have not created the route let's add the route and that link in the nav bar so as simple let's go to our router index.js file here I am going to add one route named as students okay so this is my students route and create the component student student list copy this and import student list from the path so we are we have already created that student.js so just go one step back and then move inside the pages and then go for the file student.js are simple let's save it guys and now you can get back and refresh okay we have not added in the navbar and now guys let's get back to the nav bar so inside my components I have created that navbar let's move below and here we copy this and paste here change the route that is students and a route should be students so here you see in the index what is here okay so same route we have pasted that path and now you can get back to student.js save it now if you refresh perfect so we have got that student URL guys let's click on that students cool so here you see comes okay and now guys let me just design this button and move to this right side and let's give a space from Top go to up and here you add a class name button button primary and float and and margin top 5. done guys and now let's begin with fetching the record from the API so all done let's inspect here first get back let's begin with the mounted okay so in react we don't call mounted instead we call use effect okay so here we enter and you need to import the class guys so you just have to import react and give comma and open and close curly brace from react okay and this you have to Define here use effect inside your top and then here we are going to remove this third and do not require this return we are going directly inside this use effect so now guys let us fetch the data so guys to fetch the data we have to use some HTTP call request okay so either you can use Ajax or axios or fetch directly JavaScript functions okay so now guys we are going to use axios to fetch the data from the API so guys for that let us just install the axios so npm install hit enter so guys here you see our axios is successfully installed and now we can use the actions axios dot get method use then function inside that response of open and close curly brace where you are going to get the data so now to use the axios you need to import the excuse import axios from axios okay let's say and here inside your tilt symbol let's open the Tilt symbol copy the API and paste here so now guys let's copy this response and paste in a console log so console DOT log function and paste that response so now what happens if you let me get back here on the main bash so let's see that it is compiled or not okay compiled successfully now we can get back on your react app let's move to our console and refresh it's loading so here you see guys that the data has been come okay so inside your data function here you get your students records that is the detail okay so all these details whatever there in the API you get here so now guys let us print this data in our HTML table let's get back so now guys what we have to do we have to store this data in our state variable okay inside one variable so for that to store the data in a variable you have to use use State okay so let me just type use state hit enter and here guys I am going to define the array and here we need to set the variable so my variable name is going to be a students so in students and here we are going to set as set students make this Capital also so let's copy this and move inside your axios function and paste here hit enter and you get the response so response dot data dot students okay so this student's record will be stored inside your students variable perfect so now guys let us copy this and get below and before your return your HTML return you have to check that and loop it let's create one variable called student details which is in beginning it is going to be null and now I am going to take the student details variable equal to your student the students what we have set the student okay student dot I am going to use the map function to Loop the data inside this you get your function and use the open and close curly brace hit enter and here you get the item and next was your index so this inside from your student data you are getting all that student item just return return a TR table row table data and inside this table row we have to give the key because when data Loops multiple times here you have to define the key key equal to open and close calibrous index and here let's copy this item open and close curly brace item dot ID then your name course email and then phone okay so more two records that is edit and delete so now guys let us again create one more TD here we have to create one edit button and one more button for delete a simple button guys for delete and the same class design just I will change the danger okay so we have a warning here guys error that you state is not defined let me just check okay so here we are using this right so you just need to add that give comma and add the use State let's save okay student details are signed but never used so this is a warning it's telling that you have given the data but you are not using anywhere so let's use that also let's copy that and move below here inside the table body okay open and close curly brace paste it student details save it and now you won't get the warning perfect so compiled successfully now let's see the output curve so guys you see that data has been printed guys now you see that there is a glitch type so when the page is loading we are not able to know what's happening but data is loading later so for that you can just add a simple loading option also let's move on top add this your state just copy and paste and true and this is going to be a loading okay and here also add it to loading let's make it to loading loading now guys let us copy this and just below your reuse effect I am going to add a if condition open and close curly brace where we'll add this loading part and here we are going to return and add a simple div tag it is loading here we'll tell this save it and now let's get back so if you see if you refresh the Page by default it is just going to show loading only whether your data loads also it will be showing loading part so here you see it's showing loading and here data has come but it's still loading so you have to unset that loading so once the data is set here I am going to make it false okay save it and now you can get back and refresh perfect so now guys if you want a more better loader you can just go to this bootstrap and tell spinner hit enter so you get best loaders so I'm going to just copy one of this copy and get back to the react and here instead of pasting here I am going to create one component and include that so inside my component inside this component I will create a new file called loading dot JS hit enter and just create the function named loading open and close curly brace and Export default export default loading and then here you are going to return open and close bracket and place your code that's it and here loading dot dot dot please wait let's put this in a span and make sure it should be in a complete div tag open and close and paste outside let's save and now guys you are going to call this loading component in your student view or any view edit update when you do you just need to call here loading component and import this loading guys so just import loading from go one step back go to components forward slash loading dot Js save it go back and refresh perfect so here you see what happens you get one invalid Dom property guys that is class because we have used the bootstrap class instead of giving class you have to use a class name because the react doesn't supports this and you make sure you are giving this in a container container and margin top three and here I miss that class name let's add that now save it and you can get back so now guys let us see whether that warning has gone or not let's refresh perfect so here you see that it is in center and the warning also is not coming cool so guys we have successfully learned how to fetch the data from laravel API in react.js so guys in this video that's it and let's continue next video how to add the data inside our database using the API okay so guys in this video that's it thank you for watching this video please subscribe like and share

Channel: Funda Of Web IT

Views: 8,123

Keywords: fundaofwebit, how to fetch data using api in react js, fetch data from database using api in react js, how to get data using api and display in html table in react js, how to make loader for api call in react js, page loading in react, get data in react, react js crud 18, react 18, react js crud tutorial, react js crud, how to make loader in react js, how to fetch data from api in react js

Id: T-r6xPM-qqE

Length: 16min 4sec (964 seconds)

Published: Sat Feb 18 2023