CODEWITHSUNDEEP
reactjsgraphqlcontentful
Shuib Abdillahi
Shuib Abdillahi

Reputation: 45

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

Upvotes: 3

Views: 2620

Answers (2)

Six Dreams Tech Team
Six Dreams Tech Team

Reputation: 1

If you are using import { documentToReactComponents } from '@contentful/rich-text-react-renderer' and want to customize how lists and other blocks are rendered, you can use the following approach.

To avoid unwanted paragraph (<p>) tags inside list items (<li>), you can use a custom renderNode option to unwrap these tags. This method ensures that your lists are rendered cleanly, without unnecessary wrapping elements.

import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
import { BLOCKS } from '@contentful/rich-text-types';
    
    const renderOptions = {
      renderNode: {
        [BLOCKS.PARAGRAPH]: (node, children) => (
          <p className="mb-4 leading-relaxed">{children}</p>
        ),
        [BLOCKS.UL_LIST]: (node, children) => (
          <ul className="list-disc list-inside mb-4">{children}</ul>
        ),
        [BLOCKS.OL_LIST]: (node, children) => (
          <ol className="list-decimal list-inside mb-4">{children}</ol>
        ),
        [BLOCKS.LIST_ITEM]: (node, children) => {
          // Unwrap paragraphs inside list items
          const unTaggedChildren = documentToReactComponents(node, {
            renderNode: {
              [BLOCKS.PARAGRAPH]: (_node, children) => children, // Remove <p> tags inside <li>
            },
          });
          return unTaggedChildren;
        },
      },
    };
    
    const content = article.fields.content;
    
    return documentToReactComponents(content, renderOptions);

Upvotes: 0

Dylan Schoenmakers
Dylan Schoenmakers

Reputation: 171

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)

Upvotes: 3

Related Questions