CODEWITHSUNDEEP
javascriptreactjsfirebasegoogle-cloud-firestore
user18106703
user18106703

Reputation:

How would I get the data I need from this array?

I am trying to get all the data from my firebase firestore and put it into a javascript react table but I am having a difficult time.

async function GetAllDataOnce() {
  const querySnapshot = await getDocs(collection(db, "repos"));
  var data = [];
  querySnapshot.forEach(doc => {
    data.push({
      id: doc.id,
      data: doc.data()
    })
  })
  return data;
}
var returndata = GetAllDataOnce();

This code gets all the data in a promise. It then returns the promise with all this data, which is good so far. Image of promise return

But once I try and put it into a table and render it with react, it doesn't like it saying that map can't be used on anything but an array, which this data is already.

export function ListData() {
    return (
      <table>
        {returndata.map(returndata => (
          <tr key={returndata.id}>
            <td>{returndata.data}</td>
          </tr>
        ))}
      </table>
    )
  }

Okay so that didn't work, so I try and just get a specific part of the array using

{returndata.data.map...

and it returns undefined. I have been searching all over for this and I have no idea. Any help would be appreciated.

EDIT 1 (Im guessing ill need a lot of these): Okay so now I have a little bit of success, after modifying some code I have come to this (which still doesn't fix anything):

export const ListData = () =>{ 
  const [dataList,setDataList] = useState([]);
    useEffect(() =>{
        async function callData(){
           const result = await GetAllDataOnce()
           return result
        }
       setDataList(callData())
     },[])
    async function GetAllDataOnce() {
       const querySnapshot = await getDocs(collection(db, "repos"));
       var data = [];
       querySnapshot.forEach(doc => {
          data.push({
            id: doc.id,
            data: doc.data()
          })
       })
      return data;
    }
  
   return (
        <table>
          {dataList.map(returndata => (
            <tr key={returndata.id}>
              <td>{returndata.data}</td>
            </tr>
          ))}
        </table>
  )}

Now I get an error:

Uncaught TypeError: dataList.map is not a function

Any help would be great!

Upvotes: 1

Views: 90

Answers (1)

Mahdi Ashouri
Mahdi Ashouri

Reputation: 562

const myComponnetName = () =>{ 
const [dataList,setDataList] = useState([]);


  useEffect(() =>{
      async function callData(){
         const result = await querySnapshot()
         return result
      }
     setDataList(callData())
   },[])


  async function GetAllDataOnce() {
     const querySnapshot = await getDocs(collection(db, "repos"));
     var data = [];
     querySnapshot.forEach(doc => {
        data.push({
          id: doc.id,
          data: doc.data()
        })
     })
    return data;
  }

 return (
      <table>
        {dataList.map(returndata => (
          <tr key={returndata.id}>
            <td>{returndata.data}</td>
          </tr>
        ))}
      </table>
)




}

Upvotes: 1

Related Questions