Skip to content
Get help on Slack

How to render rich text content type on homepage using @portabletext/react library.

10 replies
Last updated: May 19, 2022
hi guys,
I have this piece of content type that is a rich text:

   {
            name: "info",
            title: "Info",
            type: "array",
            of: [
                {
                title: "Block",
                type: "block",
                styles: [{title: "Normal", value: "normal"}],
                lists: [],
            },
and I need to render this on my homepage, how do I render this in here:

export async function getStaticProps ({preview = false}) {
  const product = await getClient(preview).fetch(groq`
    *[_type == 'product']{
      name,
      sku,
      image,
      finish,
      info,
    }[0]`)

  return {
      props: {
        product,
      },
    }
}
May 19, 2022, 6:52 AM
You’ll need to use the @portabletext/react library. There is a good guide on getting started. Essentially, you’ll want to pass 
<http://props.product.info|props.product.info>
to the component.
<PortableText
  value={props.product.info}
  components={/* optional object of custom components to use */}
/>
May 19, 2022, 7:00 AM
it throws me a server error: ReferenceError: props is not defined
May 19, 2022, 7:07 AM
I cannot help without seeing the code. I assume you’re destructuring your props or something? You might need to adapt the code snippets I share with you. 😅
May 19, 2022, 7:08 AM
i did it like this now but its not rendering .
const richTextcomp = (props) => {<PortableText value={props.product.info}/>}
May 19, 2022, 7:10 AM
It does show up in the console
May 19, 2022, 7:10 AM
You’re not returning anything from this function. 
PortableText
is a React component, so you would use it just like any other React component.
May 19, 2022, 7:10 AM
you mean like this?
export async function getStaticProps ({preview = false}) {
  const product = await getClient(preview).fetch(groq`
    *[_type == 'product']{
      name,
      sku,
      image,
      finish,
      info,
    }[0]`)

const PortableText = (props) => {<PortableText value={props.product.info}/>}

  return {
      props: {
        product,
      },
    }
}

export default Home
May 19, 2022, 7:16 AM
Well, kind of. But there are a few things that are not working here:1. You’re shadowing the name 
PortableText
, which won’t work. If you want to wrap your 
PortableText
usage in another component, pick a different name. 
PortableText
is what you import from the library.2. You’re not returning anything from that component. You either need a 
return
statement or you need to remove these curly braces.Ultimately, you use it like this (again the code might need to get adjusted to work in your project, it’s just an example):

const Home = ({ product }) => {
  return (
    <div><PortableText value={product.info} /></div>
  )
}
May 19, 2022, 7:19 AM
ooooh I get it now I just needed to ad this
<div><PortableText value={product.info} /></div>
between my other lines in my div thanks! this works
May 19, 2022, 7:21 AM
Nice. 😊
May 19, 2022, 7:22 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?