Trying to import a JSON file into React but not working

Question

I am trying to import a JSON object from a js file in my React project. I am a newbie to React so please go easy :). I keep getting an error no matter what path I change it to (cannot be found). I've attached a screengrab of the directory structure. I am in the scripts/components folder in the home.js file. Thanks. Data is the object in the JSON file imported from the "server" folder.

import React from 'react';
import data from '../server/data';


class Home extends React.Component {
render() {
    return (
        <section id="home">
            <div className="content">
                <p>Test...</p>
            </div>
        </section>
    );
  }
}

// Export out the React Component
module.exports = Home;

this should solve import data from '../../../server/data' if you are using export default. — Garry
– Garry, Commented Sep 4, 2019 at 15:34

dance2die · Accepted Answer · 2019-09-04 15:36:46Z

1

You have to go three directories up.

../ takes you to scripts.
../../ takes you to app.
../../../ takes you to the project root.

thus,

import data from '../../../server/data';

answered Sep 4, 2019 at 15:36

dance2die

37.2k39 gold badges137 silver badges200 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Trying to import a JSON file into React but not working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related