Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

87
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!