Go Behind the Experience to see how Tecovas brings the West to life with Sanity 🤠 July 18th

Issue with rendering bulleted lists in portable text using react-portable-text package

23 replies
Last updated: Apr 20, 2021
Afternoon! I am struggling to parse lists via portable text. Im using the react-portable-text package and seem to be able to add custom classNames to h2's without any issues. However all of the bulleted list items in my unordered list are rendering to the dom as p tags and I cant seem to get the serializer to impact them. Any tips are appreciated! https://jmp.sh/S4NZ2qn
Apr 20, 2021, 1:05 AM
Can’t say for sure but one thing comes to mind — you don’t have any serialisers for
ul
or
ol
so you effectively only serialising list items
Apr 20, 2021, 1:13 AM
Thanks, I was just playing with the idea of add a UL serializer. The odd thing is that they arent being picked up because each list item is being output as a P tag and there is no actual UL being output (even without any serializers).
Apr 20, 2021, 1:15 AM
Apr 20, 2021, 1:16 AM
What if you set your
li
serialiser to something crazy?
h1
Apr 20, 2021, 1:16 AM
will it use the h1 then?
Apr 20, 2021, 1:16 AM
No, it doesnt seem to change anything
Apr 20, 2021, 1:17 AM
Does your list actually have a value of
li
in Sanity? Usually you’ll serialize
bullet
or
number
. https://www.sanity.io/docs/block-type#lists-59b2751e6a05
Apr 20, 2021, 1:17 AM
I had a problem once with pasting a list from google docs…bullets were there but it wasn’t actually a list. Can this be a problem?
Apr 20, 2021, 1:19 AM
You might be on to something... I used the built in little bullet option to create the list and this is what is being output in the inspect: https://jmp.sh/fWfg4iK
Apr 20, 2021, 1:19 AM
I was basically just following the docs here to change the li's: https://www.sanity.io/plugins/react-portable-text
Apr 20, 2021, 1:20 AM
user A
Does that mean that you generally would select the items in the serializer with "bullet"
Apr 20, 2021, 1:23 AM
Yes, something like:

const serializers = {
  lists: {
    bullet: ({ children }) => <li style={{ color: 'red' }}>{children}</li>
  }
}
Apr 20, 2021, 1:25 AM
This indeed peculiar. The types of “list items” are blocks…
Apr 20, 2021, 1:25 AM
But the docs clearly refer to
ul
and
li
. As well as the code itself all the way down to the internal hyperscript package
Apr 20, 2021, 1:26 AM
got it…
react-portable-text
is a third party plugin
Apr 20, 2021, 1:28 AM
Apr 20, 2021, 1:28 AM
and the official one has
list
and
listItem
serialisers 🤷
Apr 20, 2021, 1:29 AM
Interesting, I also saw a note that you will want to use the "raw" selectors in the graphql query. Will try this now combined with that serializer to see if it helps.
Apr 20, 2021, 1:30 AM
I went through the code and it doesn’t make sense to me that list items are
_type: "block"
Apr 20, 2021, 1:35 AM
The official library expects it to be
_type: "list"
Apr 20, 2021, 1:36 AM
But I might be missing something. I’d trust
user A
more than me to be honest:)
Apr 20, 2021, 1:36 AM
Thanks for the help! I had tried the official plugin but switched to react-portable-text after quite a bit of fighting with it. Turns out that in both cases (block-content-to-react and react-portable-text) you needed to query the _raw version of the portable text in graphql for it to renders lists instead of paragraphs. This ultimately was the key for this to work: https://www.sanity.io/plugins/react-portable-text
Apr 20, 2021, 2:07 AM
Great to hear you got this working, Chad! 🙌
Apr 20, 2021, 2:14 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.

Was this answer helpful?