display all documents from a collection react firebase

Question

I have a collection named "journee", and i want to build a list with all elements inside so i get all the data like this :

export async function getAllJournaux() {
    const journaux = {};
    const querySnapshot = await getDocs(collection(db, "journaux"));
    querySnapshot.forEach((doc) => {
    // doc.data() is never undefined for query doc snapshots
        // console.log(doc.id, " => ", doc.data());
        journaux[doc.id] = doc.data();
    });
    return journaux;
}

Then on my page getIt witn an useEffect like :

const [journaux, setJournaux] = React.useState();

useEffect(() => {
    const getJournaux = async () => {
        try {
            const getJournaux = await getAllJournaux();
            setJournaux(getJournaux);
        } catch(error) {
            // handle any rejections/errors/etc
        }
    };
    getJournaux(); // <-- fetch/compute coupeur value
}, []);
if (!journaux){
    console.log("wait"); // or loading indicator/etc
}else{
    console.log(journaux);
}

But how to make a list with the data on my screen , for the moment i just access it with console.log.

The outpout of console.log

{
    "8SlEz4CslmTMSxWuqB8W2lDICwj22022-05-02": {
        "date": "2022-05-02",
        "billetage": {
            "5": 0,
            "10": 0,
            "25": 0,
            "50": 0,
            "100": 0,
            "200": 0,
            "250": 0,
            "500": 0,
            "1000": "2",
            "2000": "3",
            "5000": "4",
            "10000": "5"
        },
        "pt": "3400000",
        "at": "30000",
        "vt": "450000",
        "coupeur": "qKh2entwU7YD0wcxWRI3"
    },
    "8SlEz4CslmTMSxWuqB8W2lDICwj22022-05-03": {
        "at": "555",
        "date": "2022-05-03",
        "coupeur": "YuYRYzWj4CVidsmAjO1d",
        "vt": "334",
        "pt": "5555"
    },
    "KiuU1xQaKWTAx5mt9XL8vBpY3Y822022-03-01": {
        "pt": "150000",
        "vt": "450000",
        "date": "2022-03-01",
        "at": "3000",
        "billetage": {
            "5": "5",
            "10": "3",
            "25": "5",
            "50": "1",
            "100": "2",
            "200": "4",
            "250": "2",
            "500": "3",
            "1000": "6",
            "2000": "3",
            "5000": "4",
            "10000": "2"
        },
        "coupeur": "Ad5g5AE2HdqbZGzhu7G5"
    },
    "KiuU1xQaKWTAx5mt9XL8vBpY3Y822022-05-11": {
        "coupeur": "qKh2entwU7YD0wcxWRI3",
        "billetage": {
            "5": 0,
            "10": 0,
            "25": 0,
            "50": 0,
            "100": 0,
            "200": 0,
            "250": 0,
            "500": 0,
            "1000": 0,
            "2000": "5",
            "5000": "3",
            "10000": "10"
        },
        "pt": "30000",
        "date": "2022-05-11",
        "at": "100",
        "vt": "200000"
    },
    "KiuU1xQaKWTAx5mt9XL8vBpY3Y822022-05-23T14:03": {
        "date": "2022-05-23T14:03",
        "pt": "50000",
        "coupeur": "",
        "at": "130000",
        "vt": "200000",
        "billetage": {
            "5": 0,
            "10": 0,
            "25": 0,
            "50": 0,
            "100": 0,
            "200": 0,
            "250": 0,
            "500": 0,
            "1000": 0,
            "2000": "3",
            "5000": "5",
            "10000": "2"
        }
    }
}

Thank you

Answer 1

getAllJournaux is returning an object, so you have to use Object.keys to iterate

const Component = () => {
  const [journaux, setJournaux] = useState();
  useEffect(() => {
    const getJournaux = async () => {
      try {
        const getJournaux = await getAllJournaux();
        setJournaux(getJournaux);
      } catch (error) {}
    };
    getJournaux();
  }, []);
  
  return <ul>
      {Object.keys(journaux || {}).map(item => (
          <li>{item.coupeur}</li>
      ))}
  </ul>
};