i have a proble displaying the content from contentful to the server component.Everything works fine with no runtime errors but give this error " Objects are not valid as a React child (found: object with keys {nodeType, data, content}). If you meant to render a collection of children, use an array instead"
I tried converting the values from the api as string but still gives same error.
const getPortfolios = async () => {
const entries = await client.getEntries({ content_type: "portfoliov2" });
return entries.items; // Access the items array directly
}
const archive = async () => {
const response = await getPortfolios()
console.log(response)
return (
<div className="flex min-h-screen flex-col items-center justify-between p-24">
{response.map((portfolio, index) => {
const { name, description } = portfolio.fields;
return (
<div key={index}>
<Table>
<TableCaption>A list of your recent invoices.</TableCaption>
<TableHeader>
<TableRow>
<TableHead className="w-[100px]">name</TableHead>
<TableHead>Description</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell className="font-medium">{name as string}</TableCell> {/* Render title directly */}
<TableCell>{description as string}</TableCell> {/* Render description directly */}
</TableRow>
</TableBody>
</Table>
</div>
);
})}
</div>
);
}
export default archive
2
Answers
Can we have more details about the line causing the issue?
My first guess is that
name
ordescription
are not string but object. You shouldn’t need to cast them to string. It might hide typescript errors.You seem to be misunderstanding what
description as string
means. It doesn’t convert the argument to a string, it just tells Typescript to pretend the argument is a string for the sake of type checking. But if it’s an object, it will stay an object at runtime.Maybe you can try
JSON.stringify(description)
instead, which does convert the object to a string at runtime.