title: how to import json data file and use it in a react component?
body: <p>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</p>
  <pre><code>  &lt;body&gt;
      &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;
  </code></pre>
  <p>Here is the index.js</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;App /&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById('root')
  );
  </code></pre>
  <p>Here is the app.js</p>
  <pre><code>import './App.css';
  import './components/WatchlistTable.js';
  import 'rsuite/lib/styles/index.less';
  
    function App() {
      return &lt;WatchlistTable /&gt;
    }
  export default App;
  </code></pre>
  <p>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 &quot;Module not found: Can't resolve fakeData.json&quot;. So I try another way.</p>
  <pre><code>import {fakeData} from 'fakeData.json';
  </code></pre>
  <p>But it gives same error.  In the Visual Studio Code editor I notice message like: &quot;there is no fakeData.json in the public folder.&quot;</p>
  <p>So I make a copy and put it there.  Now VSC error disappears but other error remains.
  The fakeData.json file looks like this:</p>
  <pre><code>[
      {
        &quot;id&quot;: 1,
        &quot;avartar&quot;: &quot;url/128.jpg&quot;,
        blah blah blah...
      },
  ]
  </code></pre>
  <p>So I try another way.  I change fakeData.json in components folder to fakeData.js and add</p>
  <pre><code>const fakeData = [
  </code></pre>
  <p>But same error.  So I try:</p>
  <pre><code>const fakeData = require('fakeData.js');
  </code></pre>
  <p>But same error.  Suggestions?</p>
  <p><strong>EDIT</strong>:  Per Ridik, I now have this in WatchlistTable.js</p>
  <pre><code> import React from 'react';
   import fakeData from 'fakeData';
  </code></pre>
  <p>And I have</p>
  <pre><code>export default fakeData;
  </code></pre>
  <p>at the end of the fakeData.js file.  But still getting same error:
  ./src/components/WatchlistTable.js</p>
  <blockquote>
  <p>Module not found: Can't resolve 'fakeData' in
  'C:\Users\Greg\Projects\react-demos\backtester-rsuite\src\components'</p>
  </blockquote>