Lost in translation - Remix edition
Last week I made a ⚡️ talk at Remix Copenhagen meetup. I thought I make a short blog post about the content if I already gather the material for it. There is a mistake in this code. Can you find it? 🔍 import type { Note } from '@prisma/client'; import { useCatch, useLoaderData } from '@remix-run/react'; import type { LoaderFunction } from '@remix-run/server-runtime'; import { json } from '@remix-run/server-runtime'; import { prisma } from '~/db.server'; /* export type Note = { id: string title: string body: string createdAt: Date updatedAt: Date } */ type LoaderData = { notes: Note[]; }; export const loader: LoaderFunction = async () => { const notes = await prisma.note.findMany({}); return json({ notes }); }; export default function Problem() { const { notes } = useLoaderData<LoaderData>(); return ( <> {notes.map((note) => ( <div key={note.id} className="p flex flex-auto flex-col p-4 sm:p-6 lg:p-8" > <h2 className="text-2xl font-bold">{note.title}</h2> <ul className="text-lg"> <li> Created at: {Intl.DateTimeFormat('en-US').format(note.createdAt)} </li> <li> Updated at: {Intl.DateTimeFormat('en-US').format(note.updatedAt)} </li> <li>Body: {note.body}</li> </ul> </div> ))} </> ); } ⚠️ Solution The problem is with the following lines: ...