display all documents from a collection react firebase - reactjs

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>
};

Answer 2

const Component = () => {
const [journaux, setJournaux] = useState();
useEffect(() => {
const getJournaux = async () => {
try {
const getJournaux = await getAllJournaux();
setJournaux(getJournaux);
} catch (error) {}
};
getJournaux();
}, []);
// Change .prop1 to a property found in each object of the list
return <ul>
{(journaux || []).map(item => (
<li>{item.prop1}</li>
))}
</ul>
};