mapping of array in react

Question

I am trying to map array in react but it is not working.How can i map the element.It shows TypeError: Cannot read properties of undefined (reading 'map') Thanks in advance

Here is my code

import {useCollection} from "react-firebase-hooks/firestore";
import {db,storage} from "../firebases";
import {useState,useEffect} from 'react';
import Post from "./Post";

const Posts = ({posts,myId}) => {
  
 const [realPost, loading, error] = useCollection(
   db.collection("posts").orderBy("timestamp","desc")
 );

  const [data, setData] = useState([]);

  useEffect(() => {
    

   realPost?.docs.map((ele,index)=>{
ele.data().postImages.map((urls,i)=>{
    urls[i].map((url,j)=>{
        console.log("index" + j);
    console.log("image"+url)
    })
    
})  
})

  },[])

Here is data structure in firebase firestore

  postImage
    0
    url
    0 "https://firebasestorage.googleapis.com/v0/b/facebook-clone-1870b.appspot.com/o/posts%2FScreenshot%20(4).png?alt=media&token=7c4bfce4-3c67-4ddf-ab2e-ac884cef3393"
    1 "https://firebasestorage.googleapis.com/v0/b/facebook-clone-1870b.appspot.com/o/posts%2FScreenshot%20(3).png?alt=media&token=f36a86f2-0fa0-44ae-b85f-86cc5d8da7d0"
    2 "https://firebasestorage.googleapis.com/v0/b/facebook-clone-1870b.appspot.com/o/posts%2FScreenshot%20(1).png?alt=media&token=155761cd-9f2d-4c63-b5c7-c66ec366d721"
    timestamp "2021/10/31 1:00:00 PM"
    userId    38

The error is **

realPost?.docs.map((ele,index)=>{
  26 |  ele.data().postImages.map((urls,i)=>{
> 27 |      urls[i].map((url,j)=>{
     |             ^
  28 |          console.log("index" + j);
  29 |      console.log("image"+url)
  30 |      })

I get this

{url: Array(3)}url: (3) ['https://firebasestorage.googleapis.com/v0/b/facebo…=media&token=a3bc6df3-e483-44b6-a6a7-7d7dc0a96956', 'https://firebasestorage.googleapis.com/v0/b/facebo…=media&token=ca1ad6fb-f68e-4452-a556-7a31d426ca8c', 'https://firebasestorage.googleapis.com/v0/b/facebo…=media&token=a3bc6df3-e483-44b6-a6a7-7d7dc0a96956'][[Prototype]]: Object
11:24:46.053 Posts.js:28
 break
11:24:46.059 Posts.js:27 {url: Array(3)}url: (3) ['https://firebasestorage.googleapis.com/v0/b/facebo…=media&token=a4d35c35-046b-448d-86a3-da5826658e54', 'https://firebasestorage.googleapis.com/v0/b/facebo…=media&token=26f4413e-4d5c-407e-9db5-c581e41758f6', 'https://firebasestorage.googleapis.com/v0/b/facebo…=media&token=9365b619-aae9-4012-bd85-9d6eb6bb2320'][[Prototype]]: Object
11:24:46.061 Posts.js:28
 break

when i execute

realPost?.docs.map((ele,index)=>{
    ele.data().postImages.map((urls,i)=>{
        console.log(urls)
        console.log("break")
        })
        
    })

I get this

 [
  {
    "url": [
      "https://firebasestorage.googleapis.com/v0/b/facebook-clone-1870b.appspot.com/o/posts%2FScreenshot%20(4).png?alt=media&token=a3bc6df3-e483-44b6-a6a7-7d7dc0a96956",
      "https://firebasestorage.googleapis.com/v0/b/facebook-clone-1870b.appspot.com/o/posts%2FScreenshot%20(3).png?alt=media&token=ca1ad6fb-f68e-4452-a556-7a31d426ca8c",
      "https://firebasestorage.googleapis.com/v0/b/facebook-clone-1870b.appspot.com/o/posts%2FScreenshot%20(4).png?alt=media&token=a3bc6df3-e483-44b6-a6a7-7d7dc0a96956"
    ]
  }
]
11:31:42.232 Posts.js:26 [
  {
    "url": [
      "https://firebasestorage.googleapis.com/v0/b/facebook-clone-1870b.appspot.com/o/posts%2FScreenshot%20(4).png?alt=media&token=a4d35c35-046b-448d-86a3-da5826658e54",
      "https://firebasestorage.googleapis.com/v0/b/facebook-clone-1870b.appspot.com/o/posts%2FScreenshot%20(3).png?alt=media&token=26f4413e-4d5c-407e-9db5-c581e41758f6",
      "https://firebasestorage.googleapis.com/v0/b/facebook-clone-1870b.appspot.com/o/posts%2FScreenshot%20(4).png?alt=media&token=9365b619-aae9-4012-bd85-9d6eb6bb2320"
    ]
  }

]

when i changed my code to

realPost?.docs.map((ele,index)=>{
    console.log(JSON.stringify(ele.data().postImages, null, 2)) 
    })

**

What is the issue exactly? What did your effect lead as output? Your data structure can be hardly read! — tmarwen, Oct 31 '21 at 15:22

score 2 · Answer 1 · answered Nov 01 '21 at 05:50

TypeError: Cannot read properties of undefined (reading 'map') , this error arises when you try using the map method on a non-array object. Looking at your data structure and mapping of your postImages instance, you are likely to want to map the array items of url. You should first tap into the url property which holds the array, you can then map on this array like below:

  realPost?.docs.map((ele,index)=>{
    ele.data().postImages.map((urls,i)=>{
       urls.url.map((url_,j)=>{
         console.log("index" + j);
         console.log("image"+url_) //Changed URL to url_ to avoid name clashes.
    })

Note that, you are not returning anything from the map function, meaning you'd return an array of undefined, however, I'm assuming that you are currently testing and would compute and return something once your issue is fixed.

mapping of array in react

1 Answers1