How to render text from block type field in Sanity?

It sounds like you're seeing something like [object Object] or array counts instead of the actual text content from your block field. This is a common issue when trying to render Portable Text (Sanity's block content format) directly without using a proper renderer.

Block content in Sanity isn't just a simple string—it's a structured array of objects that describe the content, formatting, and other rich text features. You can't just display it like {description} in your template.

The solution is to use @portabletext/react (the official library for rendering block content):

npm install @portabletext/react

Then in your component:

import { PortableText } from '@portabletext/react'

function MyComponent({ data }) {
  return (
    <div>
      <PortableText value={data.description} />
    </div>
  )
}

The PortableText component will automatically render the text, handling paragraphs, bold/italic formatting, lists, and other standard elements.

If you need custom styling or want to render special block types, 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: {
    strong: ({children}) => <strong className="font-bold">{children}</strong>
  }
}

<PortableText value={data.description} components={components} />

If you're using the older @sanity/block-content-to-react library, note that it's deprecated—you should migrate to @portabletext/react. The main difference is that the prop names changed (like node becoming value).

Check out the ultimate guide for customizing Portable Text for more advanced use cases!