Next.js Discord

Discord Forum

Hydration error mapping an array, on db call

Unanswered
Barbary Lion posted this in #help-forum
Open in Discord
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
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