Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

89
Vistas
Data table not rendering from firebase

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
about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda