How to Fetch and Display data from API in React JS with Modern Fetch API

hi everyone in this video we'll fetch data from an API and display it on the browser using a feature method so let's get started I have already installed the project and I have created a file by the name of which data so here in this file I will write my code okay react function component and Export it and the first thing is that I should create a state cast records secretary cards is equal to use State hook I should use U State hook and it is an array which was and also I will use use effect hook can I fix the data I will use use Effect 2 yes and use effect to hook now I will write the code seven right narrow function and that's why we close and drag the asset dependency array dependency so here I will use the fetch method okay to fix the data and here the URL I would like to use this URL to fetch the data from this URL and to the end okay and here I will use response response.json I will change the format to the Json and here I will use the data array cards and here I will call this method okay City cards it's a colored seated records and I will assign data to the records okay you will assign the data to that catch here to the club here yes we pitch the data and we store that in the recounts so it is not like this only sorry just simply turn like this and now let's display our records so I will create a table and in the table I will use the or I will just simply use eul okay you will list and here I will use these prices and Records dot map and here we should have two variables the first one is the least is in text let's return a list now okay first yes just simply a list and here I will show then let's start ID and also let's start name and I will assign a key of index so let's run the server what happened you need to come here and and I'll first I will import it in the index page here which data use that here now let's run the server in theme start yes the data has switched to okay it is the data that we have pitched you can style it using bootstrap or css and display it in a table and very good I just showed you how to pitch the data and display that and um browser okay so it has the code it was it is the example okay so if you have liked the video please subscribe our YouTube channel and thanks for watching

Channel: Code With Yousaf

Views: 59,847

Keywords: Fetch Data, Display Data, Fetch Data in React js, fetch data from api using react js, display api data in react, fetch api in react js, how to fetch data from api in react js, how to display data from api in react js, react fetch data from api and display in table, react fetch data from api, react fetch data from api and display, fetching data from api in react, fetching data in react, fetching data from api in javascript, javascript, data, fetch, dispaly, useeffect react hooks

Id: CrtmSbz6k5E

Length: 5min 11sec (311 seconds)

Published: Tue Jan 31 2023