reactjsgraphqlcontentful

unordered list in contentful-rich-text rendering as P tags


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
            }
        }
    }
};

Solution

  • 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)