Fetch API data with Axios and display it in a React app with hooks

High to fetch data from an API using react.js with access Library so this example is for that to fix the data and I have created the ACT app and also I have installed access Library access I have installed that and I created a file by the name of which data and I imported it in the index here okay let's write our code now functional component export it and the first thing is that we should create a state asked credit cards see three cards I will use USD talk for this and assign an array to this and now I will use use effect hook to fix the data our root function and also I will use a array dependency now here I will actually use access Library which I have installed and now I will use the git method for this and I will pause the URL in the videos my URL from where I would like to fetch my data so this is the URL that I would like to pitch the users from this API I will use it here learning the response and now see three cards available uh the axis Library by default for Forum the response to Json format okay we don't need to pass that to the Json if there was any error catch so then display that and they can so so now let's switch our data so I will just pitch the data in table I will create a table in here T buddy I will use a table row it is the ID with us and name and the same I will use sorry you never use Tubidy now using array here this TD with us and so this is the dividers and before here I should before pasting it I will use the um map function here I will use the map records .map and have it faster regarding index use the error function and here I will use the code that I have wrote already I will assign key to this eye with us and here I will write the ID fix the ID record.id and also recorder name let's run the server start yeah we have these three cards of the users okay the IDF name and name of the image so you can fix there username email and others that has other properties also but I have just displayed ID and names so you can design it and it was just to show you how to fix the data from an API so if you have liked the video please subscribe our YouTube channels and thanks for watching

Channel: Code With Yousaf

Views: 10,166

Keywords: fetch api data with axios and display it in a react app, react hooks, how to fetch data with axios in react, how to fetch data from api in react js, how to use axios with react, how to fetch data in react, axios react hooks, react axios get json data, react with axios, react hooks tutorial, react, react axios get request with headers, axios with react, fetching data from an api with react hooks, react axios, making a project with axios and react, react tutorial, react js

Id: bfYLPXRjvVo

Length: 4min 13sec (253 seconds)

Published: Tue Jan 31 2023