I am working on a React Table. How can I fetch data from an external json file and display the data from that json file?
Here is my CodeSandbox - https://codesandbox.io/s/jl8zznpzyv
I have added a json file. Being a beginner in React, I am not aware about how to fetch data from an external json file and display the data from that json file.
Export your JSON file through a variable (using let, const), and import it into your file where you need that JSON data.
have a look:-
sample.js
const sampleData = [ { "firstName": "Sam", "lastName": "Jones", "age": "a" }, { "firstName": "Sam1", "lastName": "Jones1", "age": "a" }, ] export default sampleData; and now importing it in my file where i want to use my data
home.js
import React, { Component } from 'react' import sampleData from './sample.json' export default class Home extends Component{ render(){ return( <div> { sampleData.map((item, i) => { return ( <div> <h4> My Name is {item.firstName} {item.lastName} and my age is {item.age}.</h4> </div> ) } </div> ) } } 
