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.