how to import data in react from a js file to use in components

Question

This data is in its own .js file I want to be able to use it all over my app how can I?

   const posts = [{
          username: "lenard",
          avi: "https://scontent-sjc2-1.cdninstagram.com/t51.2885-15/e35/20905417_730036297205402_7461293070093385728_n.jpg",
        }]

I tried importing it into my App.js and passing it down as a prop

import posts from './data/posts'; //the js file with the data
import Posts from './components/Posts/Posts'; // the component I want to use it in
class App extends Component {
  render() {
    return (
      <div className="App">
            <Navigation />
            <Posts posts={posts}/>
      </div>
    );
  }
}

When I try to use posts (data) in my Posts.js component I get the error posts is not defined when I try to map through it

{posts.map((item) =>

but I do not understand why its not defined if I passed it down as a prop.

Dekel · Accepted Answer · 2017-09-12 22:19:44Z

21

You should export the posts in your js file in order to import it in other files:

export const posts = [{
      username: "lenard",
      avi: "https://scontent-sjc2-1.cdninstagram.com/t51.2885-15/e35/20905417_730036297205402_7461293070093385728_n.jpg",
}]

Then you can use

import {posts} from './data/posts';

Here is a working example:
https://www.webpackbin.com/bins/-KtsA8KTKvwxTUo2qlW8

If you want to export default you will need to create the consts and then export it:

const posts = [{
      username: "lenard",
      avi: "https://scontent-sjc2-1.cdninstagram.com/t51.2885-15/e35/20905417_730036297205402_7461293070093385728_n.jpg"
}];

export default posts;

And import it regularly:

import posts from './data/posts';

https://www.webpackbin.com/bins/-Kts8LJQBS4I1pprHiSo

edited Sep 12, 2017 at 22:19

answered Sep 12, 2017 at 21:45

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

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

7 Comments

Omar K Over a year ago

export default posts = [{       username: "lenard",       avi: "https://scontent-sjc2-1.cdninstagram.com/t51.2885-15/e35/20905417_730036297205402_7461293070093385728_n.jpg", }]

does not work it throws an error I think it needs the const or var before.

Dekel Over a year ago

Sorry, it should be export default const posts = ... answer updated

Omar K Over a year ago

change it to const posts = [{....}} then just did export default posts but it still says posts is undefined.

Dekel Over a year ago

Checking it, give me a minute or two :)

Dekel Over a year ago

Check the two examples in my answer

|

Sasindu Lakshitha · Accepted Answer · 2019-03-18 07:42:06Z

1

Importing default export: If we export something as like export default. Use below syntax to import.

import GIVEN_NAME from ADDRESS

Importing named values: One module can have number of exports. If our js like that we can use below syntax to import.

import { PARA_NAME } from ADDRESS

And similarly for multiple such imports we can use a comma to seperate two parameter name within the curly braces.

Importing a combination of Default Exports and Named Values:

import GIVEN_NAME, { PARA_NAME, ... } from ADDRESS

Exporting syntaxes:-

export default GIVEN_NAME
export { PARA_NAME }

Go to below site it has a good explanation. https://www.geeksforgeeks.org/reactjs-importing-exporting/

answered Mar 18, 2019 at 7:42

Sasindu Lakshitha

1,10611 silver badges8 bronze badges

Comments

Yasmina · Accepted Answer · 2022-12-13 11:51:14Z

1

you just forgot to use curly brackets :

import {posts} from './data/posts';

But if you don't want to use curly brackets, you just need to use (export default) when exporting the posts:

const posts = [{
  username: "test",
  avi: "test"
}];
export default posts;

Then you can use this :

import posts from './data/posts';

when importing the posts.

answered Dec 13, 2022 at 11:51

Yasmina

111 bronze badge

Comments

Avinash Dalvi · Accepted Answer · 2019-12-11 08:04:36Z

0

Your imported data must be stored in a unique variable.

so change your posts={posts} to post={posts}

Import like this

import posts from './data/posts';

<Posts post={posts}/>

edited Dec 11, 2019 at 8:04

Avinash Dalvi

9,4299 gold badges34 silver badges60 bronze badges

answered Dec 11, 2019 at 7:43

Ben De Loyola

13 bronze badges

Comments

AnatuGreen · Accepted Answer · 2022-11-09 01:43:04Z

0

I just want to add here that if you are exporting multiple datasets from a Javascript file, you have to do this:

export { articles, otherArticles };

Then in the file where you will consume the data:

import { articles, otherArticles } from "./yourDataFile"

answered Nov 9, 2022 at 1:43

AnatuGreen

9911 gold badge13 silver badges20 bronze badges

Collectives™ on Stack Overflow

how to import data in react from a js file to use in components

5 Answers 5

7 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related