Hydration error with state variables in <table>
Answered
Capelin posted this in #help-forum
CapelinOP
I get the following error when I have a
<table> tag inside a <main> tag. I checked MDN and <table> seems to fall into the Flow content category allowed in <main> tags. Is this not allowed in next.js and/or React somehow? Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching <table> in <main>.
See more info here: https://nextjs.org/docs/messages/react-hydration-error11 Replies
@Capelin I get the following error when I have a `<table>` tag inside a `<main>` tag. I checked MDN and `<table>` seems to fall into the Flow content category allowed in `<main>` tags. Is this not allowed in next.js and/or React somehow?
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching <table> in <main>.
See more info here: https://nextjs.org/docs/messages/react-hydration-error
yes,
<table> is allowed in <main>, the following code works fineexport default function Page() {
return (
<main>
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Smith</td>
</tr>
</tbody>
</table>
</main>
);
}CapelinOP
oh
@joulev yes, `<table>` is allowed in `<main>`, the following code works fine
ts
export default function Page() {
return (
<main>
<table>
<thead>
<tr>
<th>id</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Smith</td>
</tr>
</tbody>
</table>
</main>
);
}
CapelinOP
seems like my initial post was misleading then. I played around my code for a bit and it seems like it doesn't like my useState variables inside the table
well i can't comment on that with this much information
CapelinOP
import { useState } from "react";
export default function Page() {
const [foobar, setFoobar] = useState("test");
return (
<main>
<table>
{foobar}
</table>
</main>
);
}@joulev well i can't comment on that with this much information
CapelinOP
^this errors out on my end
the same error can be reproduced with just this
export default function Page() {
return <table>Hello</table>;
}you are making an invalid table that's why
add sufficient thead, tbody and things like that
Answer
CapelinOP
Yup, I'm just unfamiliar with table syntax in general. That fixes it
Thank you