I am trying to populate the StickyTable template in react. I am not seeing anyhting in my console log but an empty array.
Is there anything obvious that I am missing in my code? I cannot seem to figure out where I am going wrong with this and perhaps a second pair of eyes could help me.
I know my backend is working properly but there is something going wrong on this frontend code
export default function StickyHeadTable() {
const rows = useState( [
createData(1, "fruit ID", 'fruitId'),
createData(2, "fruit Name", 'fruitName'),
createData(3, "Fruit Price", 'fruitPrice'),
]);
const [dataRows] = useState([]);
const [data, setData] = useState("");
useEffect(() => {
(async () => {
fetch(SERVER_URL + "fruits/")
.then((response) => response.json())
.then(rowData => {
// fruits: responseData
const data= dataRows.map((a) => {
const dataRows = [];
this.state.rows.forEach((a, i) => {
dataRows.push(createData(a.FruitId, a.fruitType, a.fruitPrice));
});
})
console.log("rows", dataRows);
})
})();
});
return (
<Paper sx={{ width: "100%", overflow: "hidden" }}>
<TableContainer sx={{ maxHeight: 440 }}>
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
{columns.map((column) => (
<TableCell
key={column.id}
align={column.align}
style={{ minWidth: column.minWidth }}
>
{column.label}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => {
return (
<TableRow
hover
role="checkbox"
tabIndex={-1}
key={row.Attribute}
>
{columns.map((column) => {
const value = row[column.id];
return (
<TableCell key={column.id} align={column.align}>
{column.format && typeof value === "number"
? column.format(value)
: value}
</TableCell>
);
})}
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
</Paper>
);
}