How to render rich text content type on homepage using @portabletext/react library.
10 replies
Last updated: May 19, 2022
S
hi guys,
I have this piece of content type that is a rich text:
and I need to render this on my homepage, how do I render this in here:
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: [],
},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
K
You’ll need to use the @portabletext/react library. There is a good guide on getting started. Essentially, you’ll want to pass to the component.
<http://props.product.info|props.product.info>
<PortableText
value={props.product.info}
components={/* optional object of custom components to use */}
/>May 19, 2022, 7:00 AM
S
it throws me a server error: ReferenceError: props is not defined
May 19, 2022, 7:07 AM
K
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
S
i did it like this now but its not rendering .
const richTextcomp = (props) => {<PortableText value={props.product.info}/>}May 19, 2022, 7:10 AM
S
It does show up in the console
May 19, 2022, 7:10 AM
K
You’re not returning anything from this function.
PortableTextis a React component, so you would use it just like any other React component.
May 19, 2022, 7:10 AM
S
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 HomeMay 19, 2022, 7:16 AM
K
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
PortableTextusage in another component, pick a different name.
PortableTextis what you import from the library.2. You’re not returning anything from that component. You either need a
returnstatement 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
S
ooooh I get it now I just needed to ad this
between my other lines in my div thanks! this works
<div><PortableText value={product.info} /></div>May 19, 2022, 7:21 AM
K
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.