Estoy tratando de renderizar datos de mi base de datos en tiempo real de firebase.

La estructura de mi base de datos JSON es la siguiente

 L1 > L2 > L3 > Item 1 > All results Item 2 > All Results Item 3 > All Results Item 4 > All Results

También hay múltiples L3, que conducen a 4 elementos de línea separados como se muestra arriba.

Sin embargo, no se muestran datos en la página donde estoy cargando esta información. No hay nada de malo en la forma en que estoy representando esta página, ya que pude cargar una etiqueta H1 básica antes.

Sin embargo, el uso del siguiente código muestra una pantalla en blanco por completo.

¿Dónde me he equivocado?

 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"}}> item1 </th> <th style={{textAlign: "center"}}> item2 </th> <th style={{textAlign: "center"}}> item3 </th> <th style={{textAlign: "center"}}> item4 </th> </tr> </thead> <tbody> {Object.keys(data).map((id, index) => { return ( <tr key={id}> <th scope="row">{index +1}</th> <td>{data[id].item1}</td> <td>{data[id].item2}</td> <td>{data[id].item3}</td> <td>{data[id].item4}</td> </tr> ) } )} </tbody> </table> </div> ); }; export default Data