Can anyone provide assistance with solving this issue? I have an object called "diary" coming from a database, which is passed to a component where a useState hook is expecting that object. During build time, the following error is occurring.
An error is showing in the terminal during build time (https://i.sstatic.net/JIlnQ2C9.png)
import { db } from "@/db";
import DiaryEditForm from "@/components/diary-edit-form";
interface DiaryEditPageProps {
params: {
id: string;
};
}
export default async function DiaryEditPage(props: DiaryEditPageProps) {
const id = parseInt(props.params.id);
const diary = await db.diary.findFirst({
where: { id },
});
return (
<div>
<DiaryEditForm diary={diary} />
</div>
);
}
"use client";
import { Diary } from "@prisma/client";
import { useState } from "react";
import * as actions from "@/actions";
interface DiaryEditFormProps {
diary: Diary;
}
export default function DiaryEditForm({ diary }: DiaryEditFormProps) {
const [content, setContent] = useState(diary);
const handleEditorChange = (event: {
target: { name: string; value: string };
}) => {
const { name, value } = event.target;
setContent((prevContent) => ({
...prevContent,
[name]: value,
}));
};
const editDiaryAction = actions.editDiary.bind(
null,
diary.id,
content.title,
content.description
);
return (
<form action={editDiaryAction} className="space-y-4">
<h1 className="text-center font-semibold">Edit your Diary</h1>
<div>
<label
htmlFor="title"
className="block text-gray-700 font-medium mb-2 leading-tight"
>
Title
</label>
<input
type="text"
name="title"
id="title"
value={content.title}
onChange={handleEditorChange}
className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-gray-500"
/>
</div>
<div>
<label
htmlFor="description"
className="block text-gray-700 font-medium mb-2 leading-tight"
>
Description
</label>
<textarea
name="description"
id="description"
value={content.description}
onChange={handleEditorChange}
className="min-h-32 w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-gray-500"
></textarea>
</div>
<button
type="submit"
className="bg-gray-600 text-white px-4 py-2 rounded"
>
Save
</button>
</form>
);
}
Any suggestions on how to resolve this type error?