Iv'e got a list of bullet points in my contentful space, but It shows up as P tags for some reason. I've tried using LIST_ITEM but, still same result. I just need the bullet points to show up. I think I'm missing a rich-text type but I'm not sure which one?
const options = {
renderMark: {
[BLOCKS.LIST_ITEM]: (children) =>
<li style={{ fontSize: '60px', fontFamily: 'Montserrat' }}>{children}</li>,
},
};
<ul className="leading-8">
<li>{renderRichText(data.contentfulReports.fullDescription, options)}</li>
</ul>
here is my query
query MyBlogs($slug: String) {
contentfulReports(slug: { eq: $slug }) {
title
slug
summary {
summary
}
table {
tableData
}
fullDescription {
raw
}
bannerImage {
fluid {
src
}
}
}
};
Instead of renderMark try to use renderNode:
renderNode: {
[BLOCKS.PARAGRAPH]: (node, children) => <p>{children}</p>,
[BLOCKS.UL_LIST]: (node, children) => (
<ul>{children}</ul>
),
[BLOCKS.OL_LIST]: (node, children) => (
<ol>{children}</ol>
),
[BLOCKS.LIST_ITEM]: (node, children) => <li>{children}</li>,
}
In our case we are querying json instead of raw:
fullDescription {
json
}
And use the documentToReactComponents function:
import { documentToReactComponents } from "@contentful/rich-text-react-renderer";
…
documentToReactComponents(fulldescription.json, options)