CODEWITHSUNDEEP
javascriptreactjs
Shreyash
Shreyash

Reputation: 17

logging the data but not rendering p tag , why?

I am using firebase firestore and i fetched the data , everything is working fine but when i am passing it to some component only one item gets passed but log shows all the elements correctly. I have just started learning react , any help is appreciated.

import React, { useEffect, useState } from 'react'
import { auth, provider, db } from './firebase';
import DataCard from './DataCard'

function Explore() {
    const [equipmentList, setEquipments] = useState([]);

    const fetchData = async () => {
        const res = db.collection('Available');
        const data = await res.get();

        data.docs.forEach(item => {
            setEquipments([...equipmentList, item.data()]);
        })
    }

    useEffect(() => {
        fetchData();
    }, [])

    equipmentList.forEach(item => {
        //console.log(item.description);
    })

    const dataJSX =
        <>
            {
                equipmentList.map(eq => (
                    <div key={eq.uid}>

                        {console.log(eq.equipment)}
                        <p>{eq.equipment}</p>
                    </div>
                ))

            }
        </>

    return (
        <>
            {dataJSX}
        </>
    )
}

export default Explore

Upvotes: 0

Views: 84

Answers (1)

Pavlo Zhukov
Pavlo Zhukov

Reputation: 3337

You have problems with setting fetched data into the state.

You need to call setEquipments once when data is prepared because you always erase it with an initial array plus an item from forEach.

The right code for setting equipment is

const fetchData = async () => {
        const res = db.collection('Available');
        const data = await res.get();

        setEquipments(data.docs.map(item => item.data()))
    }

Upvotes: 2

Related Questions