Fetch and Display Data Dynamically in React JS | Create dynamic table from JSON in React

hi everyone in this video we will display data dynamically in react.js for civil fix the data then they will display that dynamically so let's start first of all I will use use effect hook ER let's write a dependency and now I will use which API function okay of the JavaScript you can use access.it but I will use which here I will paste my URL so I would like to fetch the data from a locally from a file the file is here in the public directory in data.json so you can switch your data from an API directly right URL of your API so let's copy this URL localhost and paste it here in data.json after that that then we will get a result so we will change that to the Json format after that the data that we have so now what we will do we will we will declare two variables and we will Store The Columns data of columns from our data and also we will store the data in another variable so first is column sit column is equal to use statehook it will be type RBS and also the second one would be for data three cards battery cards is equal to use State hook so after writing this so now we will assign data to these variables so first I will assign The Columns to assign the column I use it column and here I will write something data dot users the users the first array okay oh sorry we will write something like object dot keys from data that users the first Arrow just take the columns okay from first Arrow and also let's write it records and here I will assign the data dot users when we pitch the data we will have data that user the user's record we have okay if the data is let's see the data data registration okay these user records we have foreign a class name that will be table and let's declare that body and table head and here I will map the data service now I will move the data from this column the column dot map we have C and index yeah and here I will like table height I will assign a key index and print the data see after printing the header so now we will print the data in body tag T buddy and let's map through records dot map and here we will have the data record and also the index I will return a table loop I will assign a key index bi and also now table data and I will print the first of all print the ID three card dot ID and name and email second would be name and the third will be email with us so we wrote this so now let's check it servers server is running already see it differentiate again so we will be with those data in a table so it was all about fetching and displaying the data dynamically in react cheese so if you have liked the video so please subscribe our YouTube channel thanks for watching

Channel: Code With Yousaf

Views: 29,336

Keywords: react, display json data in react, react tutorial, fetch api in react js, fetch and display data from api in react js, react js, json data in react js, react display records, fetch and display advanced json data in chart js, react display records from json, fetch dynamically update json data in chartjs, fetch data dynamically from api using react, fetch data dynamically from api using react and redux-saga, fetch and display, json in react, fetch and display from an api

Id: MMcFU77EOuY

Length: 4min 46sec (286 seconds)

Published: Sat Feb 04 2023