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.

Answer 1

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

Answer 2

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/

Answer 3

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.

Answer 4

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}/>

Answer 5

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"