I'm a little stuck here. Yesterday I finished coding this app to display entries from a form. It worked fine and showed each entry as a separate row. Now I started the app this morning and suddenly each new entry is rendered as a new table?

I tried to keep the code as short as possible to avoid any confusion, but I just don't know how to get my beloved table back. I must've accidentally missed a line of code somewhere, but I've been looking at this for hours, and I can't figure it out.

Help would be much appreciated.

import { db } from "./firebase";
import { ref, onValue } from "firebase/database";
import { useState, useEffect } from "react";
import { Table } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
    const [entires, setentires] = useState([]);

    useEffect(() => {
        onValue(ref(db), (snapshot) => {
            setentires([]);
            const data = snapshot.val();
            if (data !== null) {
                Object.values(data).map((date) =>
                    setentires((oldArray) => [...oldArray, date])
                );
            }
        });
    }, []);

    return (
        <div className="App">
            {entires.map((entry) => (
                <>
                    <Table responsive striped bordered hover size="sm">
                        <thead>
                            <tr>
                                <th className="tableHeading">Date</th>
                                <th className="tableHeading">FirstName</th>
                                <th className="tableHeading">LastName</th>
                                <th className="tableHeading">Email</th>
                                <th className="tableHeading">Mobile</th>
                                <th className="tableHeading">Signature</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr key={entry}>
                                <td>{entry.date}</td>
                                <td>{entry.firstName}</td>
                                <td>{entry.lastName}</td>
                                <td>{entry.email}</td>
                                <td>{entry.phone}</td>
                                <td>
                                    <img
                                        alt="Signature"
                                        className="sigImage"
                                        src={entry.Signature}
                                    ></img>
                                </td>
                            </tr>
                        </tbody>
                    </Table>
                </>
            ))}
        </div>
    );
}

export default App;

CodePudding user response：

entries.map() is returning a whole table for each entry in the array since you have the whole table JSX inside the map function.

What you could do is to have a variable what will iterate over your entries and only return individual table records, and just include those records in the return statement of the component.

CodePudding user response：

Every time something changes in the database, you get a snapshot with the entire data at ref and not just the changes. So you should replace the entire entires [sic] with the value from the snapshot.

In code that'd be something like:

onValue(ref(db), (snapshot) => {
    const data = snapshot.val();
    if (data !== null) {
        setentires(Object.values(data));
    }
});