Get help on Discord

How to handle the error "Objects are not valid as a React child" when rendering an object in React.

3 replies
Last updated: Oct 5, 2021
Error: Objects are not valid as a React child (found: object with keys {_key, _type, children, markDefs, style}). If you meant to render a collection of children, use an array instead.
[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);
  }, []);
AI Update

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/react

2. 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.

Hi Victor. How are you rendering out 
coupleHighlight
? If you’re not already doing so, I expect you’ll need to 
import BlockContent from '@sanity/block-content-to-react'
, set up a serializer (optional), and then render out 
coupleHighlight
using the 
BlockContent
component. I’m guessing at your naming convention but something like:

return (
  <>
    <BlockContent blocks={slide.coupleHighlight} serializers={serializers} />
  </>
);
Hi Victor. This error will occur when you’re trying to render out an object. You’ll want to use a tool like block-content-to-react to handle your portable text.
You will 
import BlockContent from '@sanity/block-content-to-react'
, set up a serializer (optional), and then use the 
BlockContent
component. I’m guessing at your naming convention but something like:

return (
  <>
    <BlockContent blocks={slide.coupleHighlight} serializers={serializers} />
  </>
);
Hi Victor. This error will occur when you’re trying to render out an object. You’ll want to use a tool like portable-text-to-react to handle your portable text.
You will 
import BlockContent from '@sanity/block-content-to-react'
, set up a serializer (optional), and then use the 
BlockContent
component. I’m guessing at your naming convention but something like:

return (
  <>
    <BlockContent blocks={slide.coupleHighlight} serializers={serializers} />
  </>
);

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.

Get started for freeExplore the demo

Was this answer helpful?