Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

90
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda