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/