title: how to import data in react from a js file to use in components
body: <p>This data is in its own .js file I want to be able to use it all over my app how can I?</p>
  
  <pre><code>   const posts = [{
            username: "lenard",
            avi: "https://scontent-sjc2-1.cdninstagram.com/t51.2885-15/e35/20905417_730036297205402_7461293070093385728_n.jpg",
          }]
  </code></pre>
  
  <p>I tried importing it into my App.js and passing it down as a prop </p>
  
  <pre><code>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 (
        &lt;div className="App"&gt;
              &lt;Navigation /&gt;
              &lt;Posts posts={posts}/&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>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 </p>
  
  <pre><code>{posts.map((item) =&gt;
  </code></pre>
  
  <p>but I do not understand why its not defined if I passed it down as a prop.</p>