Currently, I am facing an issue with passing content to my Material UI table using props. When props are passed explicitly, it works fine. However, I need to retrieve the props from a Firestore database and then pass them to the table. To achieve this, I am utilizing useEffect to fetch the rows upon page load. Unfortunately, when attempting to set the rows using setState, they do not appear on the table component of Material UI.
function Notice () {
return (
<div>
<Table rows= {[{Title: "ABC", A: 1, B: 2, C: 3, D: 4}]} />
</div>
);
}
The code above functions perfectly.
function Notice() {
const [rows, setRows] = useState([]);
const loadRows = () => {
getDocs(collection(db, "notice"))
.then((querySnapshot) => {
const tempRows = [];
querySnapshot.forEach((doc) => {
var fields = doc.data();
tempRows.push({Title: fields.subject, A: 1, B: 2, C: 3, D: 4});
});
setRows(tempRows);
})
.catch((error) => {
console.log(error);
});
};
useEffect(() => {
loadRows();
}, []);
return (
<div>
<Table rows={rows} />
</div>
);
}
Unfortunately, the example code above does not work as expected. Despite no errors being displayed in the console, the table remains empty. I have attempted moving the loadRows function definition inside useEffect without success. Interestingly, the tempRows object is correctly logged to the console before invoking setState.
function Notice() {
const [rows, setRows] = useState([]);
const [newProp, setNewProp] = useState([]);
const loadRows = () => {
getDocs(collection(db, "notice"))
.then((querySnapshot) => {
const tempRows = [];
querySnapshot.forEach((doc) => {
var fields = doc.data();
tempRows.push({Title: fields.subject, A: 1, B: 2, C: 3, D: 4});
});
setRows(tempRows);
})
.catch((error) => {
console.log(error);
});
};
useEffect(() => {
loadRows();
}, []);
useEffect(() => {
console.log(rows);
setNewProp(rows);
}, [rows]);
return (
<div>
<Table rows={newProp} />
</div>
);
}
I have also experimented with utilizing two useEffect hooks, where the retrieved rows are successfully printed in the console. Nonetheless, the table continues to remain empty.