Next.js Discord

Discord Forum

Issues of ... Hydration ?

Unanswered
British Shorthair posted this in #help-forum
Open in Discord
British ShorthairOP
Hello, i have an issue with next

Here my QuestionPage :

export default function QuestionPage({id}) {
    const [question, setQuestion] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            const result = await getQuestion(id);
            setQuestion(result);
        };

        fetchData();
    }, [id]);

    if (!question) {
        return <div>Loading...</div>;
    }

    return (
        <main>
            <div>
                <p>
                    <h1>{question.id}</h1>
                    <h1>{question.description}</h1>
                    <h1>{question.category}</h1>
                </p>

            </div>
        </main>
    );
}


And here my [id].js :

import {getQuestion} from "../api";

export default async function handler(req, res) {
    const { id } = req.query;

    try {
        const data = await getQuestion();
        res.status(200).json(data);
    } catch (err) {
        console.error(err);
        res.status(500).json({ error: 'An error occurred' });
    }
}


And my index.js :

export default function Home() {
  return (
      <Layout home>
        <Head>
          <title>{siteTitle}</title>
        </Head>
        <section className={utilStyles.headingMd}>
          <p>[Your Self Introduction]</p>
          <p>
            <Link href={"/posts/first-post"}>this page !</Link>
          </p>
            <p>
                <QuestionPage/>
            </p>
        </section>
      </Layout>
  );
}

My data is loaded, but when i refresh the page i have this error :

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <div> in <p>.


I don't really understand what i'm supposed to do ..

Thanks for the help !

1 Reply

Capelin
You can't wrap a <div> with a <p> which is what you're doing with this, I believe