title: TypeError: Cannot read properties of undefined (reading 'map') ReactJs Getting data from a file
body: <p>im tring to fetch data from a file called dummyData.js
  It has the following structure.</p>
  <pre><code> export const Posts = [
      {
        id: 1,
        desc: &quot;Love For All, Hatred For None.&quot;,
        photo: &quot;assets/post/1.jpeg&quot;,
        date: &quot;5 mins ago&quot;,
        userId: 1,
        like: 32,
        comment: 9,
      },
      {
        id: 2,
        photo: &quot;assets/post/2.jpeg&quot;,
        date: &quot;15 mins ago&quot;,
        userId: 2,
        like: 2,
        comment: 1,
      },
  </code></pre>
  <p>Now i am mapping the data from that file.</p>
  <pre><code>export default function Feed() {
      return (
          &lt;div className=&quot;feed&quot;&gt;
              &lt;div className=&quot;feedWrapper&quot;&gt;
                 &lt;Share/&gt;
                 {Posts.map((p) =&gt; (
                     &lt;Post key={p.id} post={p}/&gt;
                 ))}
           
              &lt;/div&gt;
          &lt;/div&gt;
      ) 
  }
  </code></pre>
  <p>here is my post component</p>
  <pre><code>export default function Post({post}) {
    console.log(post);
      return (
          &lt;div&gt;
              &lt;div className=&quot;post&quot;&gt;
                  &lt;div className=&quot;postWrapper&quot;&gt;
                      &lt;div className=&quot;postTop&quot;&gt;
                          &lt;div className=&quot;topLeft&quot;&gt;
                              &lt;img className=&quot;profilePic&quot; src=&quot;/files/prof.png&quot; alt=&quot;&quot; /&gt;
                              &lt;span className=&quot;postUsername&quot;&gt;Kasun Gayantha&lt;/span&gt;
                              &lt;span className=&quot;postDate&quot;&gt; 5 mins ago&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div className=&quot;topRight&quot;&gt;
                              &lt;MoreVert/&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;postCenter&quot;&gt;
                          &lt;span className=&quot;postText&quot;&gt;hey this is first post&lt;/span&gt;
                          &lt;img src=&quot;/files/prof.png&quot; alt=&quot;&quot; className=&quot;postImage&quot; /&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;postBottom&quot;&gt;
                          &lt;div className=&quot;postBottomLeft&quot;&gt;
                              &lt;ThumbUpAltIcon htmlColor=&quot;blue&quot; className=&quot;likeIcon&quot;/&gt;
                              &lt;FavoriteIcon htmlColor=&quot;red&quot; className=&quot;likeIcon&quot;/&gt;
                              &lt;span className=&quot;postLikeCounter&quot;&gt;32 people like it &lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div className=&quot;postBottomRight&quot;&gt;
                              &lt;span className=&quot;postCommentText&quot;&gt; comments&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>I have components called feed.jsx,Post.jsx</p>
  <p>but when I compile this the following error comes up</p>
  <pre><code>TypeError: Cannot read properties of undefined (reading 'map')
  
   return (
     9 |     &lt;div className=&quot;feed&quot;&gt;
    10 |         &lt;div className=&quot;feedWrapper&quot;&gt;
  &gt; 11 |            &lt;Share/&gt;
  ^  12 |            {Posts.map((p) =&gt; (
    13 |                &lt;Post key={p.id} post={p}/&gt;
    14 |            ))}
  </code></pre>
  <p>error is in from the line no 11.
  Im new to react , struggling to fix this. I have looked at many solutions on the internet.</p>