How to Fetch Data From API using React JS and Display in Table using Axios Library

hello everyone in this video we will switch data from an API and we will display that back in your table using react.js so this is the API that we will use OK Json placeholder a page API for testing so we will use the user records we will fetch these users from this API and we will display them using react.js so let's get started this is the react app that I have created okay I have this switch data this component okay in this component we will Implement our logic so first of all to fetch the data for that we will use axis Library you can use fetch API also fetch method but I am using access Library so first we will install that to install that simply you can run like this command npm install access okay I have already installed it no need to install it again let's check it here in the axis see this is the axis which is installed already and now we will use that let's first of all import that import access from access that has imported so now let's implement it so whenever we run our application so we should fix the data from in API and display that in the table so first you will fetch data so let's for that we will write use effect hook okay which is run at the start of the application and let's write this is a function with us and the second uh oh sorry the circle parameter is array dependency so now here we will fetch the data so fit data let's write axis that git method we will use git method and here we should write our URL so our URL would be this this is our URL let's paste it here and then it worked based on premises so here we will get the result and first we will cancel the result okay cancel that log result what we are getting and if there was any error change that error before printing in the table so let's check it how it looks like okay I have called this pitch in up.js okay I'll call that here so let's run our application close this run two so let's click on this URL so we will move to our Chrome browser so it's running so let's move to console let's come here to the console see we got this data okay this is the data that we got and it came to data in the data area we have these chain records okay uh 10 3 cards okay from zero start to ninth so these are the records that we have okay so now we will fix them here in front them in a table so let's write for that come here and first we will store this data in our variable and just create a state const data set data we will use use datehook your state hook and this is arrive with us we will assign an empty array to that and instead of console we will write sit data we will call that method and we will set result.data okay this one let's check it this data result that data we will assign it these 10 records to this data variable that we have created so now let's use them container and yes it is okay let's create one another demo could be three and let's try it here it's three feature data from API react with access okay now let's create our table inside the table let's create T hit inside that table row t h okay the first thing we should imply a fit that is the ID we can also pitch these columns header columns dynamically okay but I will because here we have more than one columns let's check it okay in a record in a record we have all these columns okay so I will just pitch ID name and email and also if you'd like to fix the address okay so let's pick the orders also okay I will pitch all these name from address I will just pitch the city okay because in the address we have many things but I will just pitch the city so let's right now um our body type inside that we will use this data variable to page data dynamically data let's write curly braces data dot map we will use map function and inside that we have a user and an index let's write return table Rule and the key of the table row should be it would be key is equal to index which is should be a unique and here we should print our data first we should display user user.id and also user.name end user Dot email for the address to display the address so for that we should write user dot address um user.adders.ct so let's write like that what happened dot City yeah I hope it will work so let's assign a class name to this table and let's check it now let's come here see we got our data okay these are the city names okay the city name that we have for example for the first one the CT name is let's come here to the address the city name is see this is the Goon bro what is that I can't read it so it was the data that we fixed and we display in a table from API okay I hope this video was helpful for you if you like this video don't forget to subscribe our YouTube channel and like this video coming down thanks for watching

Channel: Code With Yousaf

Views: 23,577

Keywords: fetch api data with axios and display it in a react app, how to fetch data in react, how to fetch data with axios in react, how to use axios with react, how to display data from api in react js, how to display data from api in react js using axios, how to fetch data from api in react js, react fetch data from api and display in table, making a project with axios and react, post form data to fetch api in react js, how to fetch api data using axios in reactjs in telugu

Id: xniVQNpdiNY

Length: 6min 56sec (416 seconds)

Published: Tue Apr 04 2023