arrow_backBACK TO DRILLS
Blue BeltssrlockPREMIUM

Hydration Mismatch From Missing thead/tbody Wrappers in an HTML Table

This table renders rows directly as children of <table> with no section wrapper.

REACT_MODULE // 0x42
function ScoreTable({ rows }) {
return (
<table>
{rows.map(row => (
<tr key={row.id}>
<td>{row.name}</td>
<td>{row.score}</td>
</tr>
))}
</table>
);
}

When server-rendered in a Next.js app, this triggers a hydration mismatch warning. Why?

lock

This Drill is Locked

This is a premium drill. Continue on to the next free drill in the sequence.