Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[bug]: Nesting Unordered List In Ordered Lists #39

Open
SolivanLau opened this issue Jun 21, 2024 · 0 comments
Open

[bug]: Nesting Unordered List In Ordered Lists #39

SolivanLau opened this issue Jun 21, 2024 · 0 comments
Labels
issue: bug Issue reporting a bug

Comments

@SolivanLau
Copy link

What version of @strapi/blocks-react-renderer are you using?

npm: 10.7.0
node: 20.14.0
react: 18.2.0
@strapi/blocks-react-renderer: 1.0.1
gatsby: 5.13.3
browser: all

What's Wrong?

When using the Rich Text block in Strapi CMS, the blocks-react-renderer is unable to render out nested unordered lists within ordered lists

To Reproduce

in your CMS, reproduce the following markdown in Strapi's Rich Text Block:

# Hello World

1. Numbered Item
   - a thing
   - another thing
   - a third thing
2. Numbered Item
   - a thing
   - another thing
   - a third thing

The output should look like this:

image

In your front-end of choice, I am using Gatsby, fetch your data and pass it through to the blocks-renderer.

Here is the object output from Strapi:

[
    {
        "type": "heading",
        "level": 1,
        "format": null,
        "children": [
            {
                "text": "Hello World",
                "type": "text",
                "children": null
            }
        ]
    },
    {
        "type": "list",
        "level": null,
        "format": "ordered",
        "children": [
            {
                "text": null,
                "type": "list-item",
                "children": [
                    {
                        "text": "A numbered Item",
                        "type": "text"
                    }
                ]
            },
            {
                "text": null,
                "type": "list",
                "children": [
                    {
                        "text": null,
                        "type": "list-item"
                    },
                    {
                        "text": null,
                        "type": "list-item"
                    },
                    {
                        "text": null,
                        "type": "list-item"
                    }
                ]
            },
            {
                "text": null,
                "type": "list-item",
                "children": [
                    {
                        "text": "Another Numbered item",
                        "type": "text"
                    }
                ]
            },
            {
                "text": null,
                "type": "list",
                "children": [
                    {
                        "text": null,
                        "type": "list-item"
                    },
                    {
                        "text": null,
                        "type": "list-item"
                    },
                    {
                        "text": null,
                        "type": "list-item"
                    }
                ]
            }
        ]
    }
]

using the rendering component:

import React from "react";
import { BlocksRenderer } from "@strapi/blocks-react-renderer";

const RichTextRenderer = ({ data }) => {
	const { text } = data;
	return <>{text && <BlocksRenderer content={text} />}</>;
};

export default RichTextRenderer;

the error I receive: Cannot read properties of undefined (reading 'map')

Error in function Block in ./node_modules/.pnpm/@strapi[email protected][email protected][email protected][email protected]/node_modules/@strapi/blocks-react-renderer/dist/Block.mjs:45

image

Expected Behaviour

I expect to be able to nest and mix lists as usual markdown but the renderer is reading the values of the nested nodes as undefined when mapping. Still looking through what the issue is exactly, but it seems like the nested unordered list is returning null.

@SolivanLau SolivanLau added the issue: bug Issue reporting a bug label Jun 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
issue: bug Issue reporting a bug
Projects
None yet
Development

No branches or pull requests

1 participant