'how to import json data file and use it in a react component?

I'm new to react and confused about how to import, export, and render components. I have a fakeData.json file located in the same src/components folder as the component I'm trying to render. Here is the index.html

  <body>
    <div id="root"></div>
  </body>

Here is the index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Here is the app.js

import './App.css';
import './components/WatchlistTable.js';
import 'rsuite/lib/styles/index.less';

  function App() {
    return <WatchlistTable />
  }
export default App;

Here is where I get confused in src/components/WatchlistTable.js. It is a rsuite table. I try to import the fakeData.json file, which is located in the same components folder, like this: import fakeData from 'fakeData.json'; But it gives error like "Module not found: Can't resolve fakeData.json". So I try another way.

import {fakeData} from 'fakeData.json';

But it gives same error. In the Visual Studio Code editor I notice message like: "there is no fakeData.json in the public folder."

So I make a copy and put it there. Now VSC error disappears but other error remains. The fakeData.json file looks like this:

[
    {
      "id": 1,
      "avartar": "url/128.jpg",
      blah blah blah...
    },
]

So I try another way. I change fakeData.json in components folder to fakeData.js and add

const fakeData = [

But same error. So I try:

const fakeData = require('fakeData.js');

But same error. Suggestions?

EDIT: Per Ridik, I now have this in WatchlistTable.js

 import React from 'react';
 import fakeData from 'fakeData';

And I have

export default fakeData;

at the end of the fakeData.js file. But still getting same error: ./src/components/WatchlistTable.js

Module not found: Can't resolve 'fakeData' in 'C:\Users\Greg\Projects\react-demos\backtester-rsuite\src\components'

Solution 1:^[1]

You can not directly import your json array from the JSON file in react. To achieve that you must store your JSON array in a variable and then export default your JSON array. By Doing this you can easily import it in your component.

FakeData.js

const fakeData = [
    {
      "id": 1,
      "avartar": "url/128.jpg",
      blah blah blah...
    },
]


export default fakeData // you must export it to use in another file.

Then in any component use it like

import fakeData from './Destination_of_file/fakeData.js' 

or

Way 2 // recomended
import fakeData from './Destination_of_file/fakeData'

Solution 2:^[2]

In your import statement you have to provide the relative path of the file. Otherwise it looks into public directory in your project. And also instead of using named import syntax use default import syntax. i.e., in your case use below statement to import that json file in your component. import jsonFile from "./fakeData.json";

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ritik Singh
Solution 2	Rithick B

'how to import json data file and use it in a react component?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]