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

user_8038892 0
Viewed 17472

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.

reactjs javascript
3 Answers

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/

user_110122280

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