Error rendering Sanity block content: Objects not valid as React child
[3:52 PM] useEffect(() => {
sanityClient
.fetch(
*[_type == "home"]{
title,
weddingDate,
description,
coupleHighlight,
coupleIntroDescription,
bannerImages[]{
asset ->{
_id,
url
},
},
coupleIntroImage[]{
asset ->{
_id,
url
},
},
}.then((data) => setSlide(data))
.catch(console.error);
}, []);
The error you're encountering happens because you're trying to render Portable Text content directly in React without properly processing it. The description and coupleIntroDescription fields in your data are Portable Text objects (with _key, _type, children, markDefs, style keys), which React can't render directly.
You need to use @portabletext/react to render these fields. Here's how to fix it:
1. Install the library:
npm install @portabletext/react2. Import and use the PortableText component:
import { PortableText } from '@portabletext/react';
// In your component where you're rendering the data:
<PortableText value={slide[0]?.description} />
<PortableText value={slide[0]?.coupleIntroDescription} />Complete example with your code:
import { useEffect, useState } from 'react';
import { PortableText } from '@portabletext/react';
import sanityClient from './sanityClient';
function YourComponent() {
const [slide, setSlide] = useState([]);
useEffect(() => {
sanityClient
.fetch(`*[_type == "home"]{
title,
weddingDate,
description,
coupleHighlight,
coupleIntroDescription,
bannerImages[]{
asset ->{
_id,
url
},
},
coupleIntroImage[]{
asset ->{
_id,
url
},
},
}`)
.then((data) => setSlide(data))
.catch(console.error);
}, []);
return (
<div>
<h1>{slide[0]?.title}</h1>
<PortableText value={slide[0]?.description} />
<PortableText value={slide[0]?.coupleIntroDescription} />
{/* Rest of your component */}
</div>
);
}Optional - Custom styling: If you want to customize how the text renders (like adding custom classes to headings or paragraphs), you can pass custom components:
const components = {
block: {
h1: ({children}) => <h1 className="text-4xl font-bold">{children}</h1>,
normal: ({children}) => <p className="my-4">{children}</p>,
},
marks: {
link: ({value, children}) => <a href={value.href} className="text-blue-500">{children}</a>,
},
};
<PortableText value={slide[0]?.description} components={components} />The key takeaway: any field in Sanity that uses the block content/Portable Text editor needs to be rendered with the <PortableText> component, not directly as a string or object. Check out the Portable Text guide for more details on customization options.
Show original thread3 replies
Was this answer helpful?
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.
