Objects are not valid as a React child (found: object with keys {nodeType, data, content})

Question

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

Answer 1

Can we have more details about the line causing the issue?

My first guess is that name or description are not string but object. You shouldn't need to cast them to string. It might hide typescript errors.

Answer 2

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.