Hydration error mapping an array, on db call
Unanswered
Barbary Lion posted this in #help-forum
Barbary LionOP
Its my first time using next and i was trying to load some data from my db
It loads, but i also get this hydration error
It loads, but i also get this hydration error
import Image from 'next/image';
import { PrismaClient } from '@prisma/client';
import markdown from '@/lib/markdown';
const db = new PrismaClient();
export default async function Home() {
const polls = await db.poll.findMany();
const renderedPolls = polls.map(async (poll, i) => (
<article key={i}>
<span>{poll.name}</span>
<span>{poll.createdAt.toString()}</span>
<span>{JSON.stringify(poll.votes)}</span>
<span>{JSON.stringify(poll.options)}</span>
<span>{poll.thumbnail}</span>
<span dangerouslySetInnerHTML={{ __html: await markdown(poll.markdown) }}></span>
</article>
));
return (
<main className='flex min-h-screen'>
<div>{renderedPolls}</div>
</main>
);
}1 Reply
Barbary LionOP