New to working with firebase.
The format of my database is as follows
L1
--L2
---L3
----L4
------- Result 1
------- Result 2
------- Result 3
------- Result 4
----L4
------- Result 1
------- Result 2
------- Result 3
------- Result 4
I am trying to simply render the data on my front end via React, but nothing is rendering when calling in the data table component. In-fact, the whole application does then not render, simply a white screen.
Below is the component for the data table, which I am trying to render.
Where am I going wrong when trying to render the data?
const Data = () => {
const [data, setData] = useState ({});
useEffect (() => {
Database.child("L1").on("value", (snapshot) => {
if (snapshot.val() !== null) {
setData({ ...snapshot.val() });
} else {
setData({});
}
});
return () => {
setData ({});
};
}, []);
return (
<div style={{marginTop: "100px"}}>
<table className="styled-table">
<thead>
<tr>
<th style={{textAlign: "center"}}> L4 </th>
<th style={{textAlign: "center"}}> L4 </th>
</tr>
</thead>
<tbody>
{Object.keys(data).map((id, index) => {
return (
<tr key={id}>
<th scope="row">{index +1}</th>
<td>{data[id].result_1}</td>
<td>{data[id].result_2}</td>
<td>{data[id].result_3}</td>
<td>{data[id].result_4}</td>
</tr>
)
} )}
</tbody>
</table>
</div>
);
};
export default Data