Next.js Discord

Discord Forum

Expected server HTML to contain a matching <table> in <body>

Unanswered
Bumble bee posted this in #help-forum
Open in Discord
Bumble beeOP
I am a little confused by this error message. What should I do?

This is my table-component:

export default function Table({ headings, rows }) {
    return (
        <table>
            <tr>{headings}</tr>
            {rows.map((row) => {
                return (
                    <tr>
                        {row.map((data) => (
                            <td>{data}</td>
                        ))}
                    </tr>
                )
            })}
        </table>
    )
}


Here I load it:

export default async function ControlPanel() {
    const currentUser = await getCurrentUser()
    const links = await getLinks({ user: currentUser })

    const tableHeadings = ['Titel', 'URL-Segment', 'Beschreibung', 'Längengrad', 'Breitengrad', 'Beginn', 'Ende']
    const tableRows = links.map((link) => {
        return [link.name, link.slug, link.description, link.latitude, link.longitude, link.startingAt, link.endingAt]
    })

    return (
        <>
            <Table headings={tableHeadings} rows={tableRows} />
        </>
    )
}

1 Reply

Australian Freshwater Crocodile
The error is most likely where you call ControlPanel rather than on the code you have shown. ALternatively, Is it possible that there is more to this segment? 

    return (
        <>
            <Table headings={tableHeadings} rows={tableRows} />
        </>
    )


You can also try to inspect the HTML you get from the initial server request, and see it it matches your expectations. This error is a sign that the DOM you get before and after the hydration are not the same.