[react-markdown] Console error for ordered attribute when using react components for ol, ul, li elements.

[angelolucas]

Hey everyone.

I get a console error related to the ordered attribute when trying to map a react component to ul and li elements.

Warning: Received false for a non-boolean attribute ordered.:

The error stops happening when the prop ordered is not transferred to the component:

const components = {
  ul: ({ children }) => <List>{children}</List>,
  li: ({ children }) => <ListItem>{children}</ListItem>,
};

return (
  <ReactMarkdown components={components}>
    {body}
  </ReactMarkdown>
)

I know this is not the proper way to solve the problem, I would like to know if there is a suitable solution for this, or if this is a remark bug

[ChristianMurphy]

@angelolucas can you share a runnable example of when/where you see the issue?
Trying this out in the react-markdown test sandbox, I'm not seeing the issue https://codesandbox.io/s/react-markdown-debug-forked-0xs3y

Some possibilities for the issue you are seeing:

• using an outdated version of react-markdown and seeing an issue which has already been fixed
• it could be an issue the the custom list component being used

[angelolucas]

That sounds like ESLint?

Yes, this one https://eslint.org/docs/rules/no-unused-vars

I'm not sure I follow.
This can be solved by using a named function instead of an anonymous arrow function, no?
https://codesandbox.io/s/react-markdown-ordered-list-named-function-mgmcs

That works (fix the TS lint error "Component definition is missing display name"), thanks!

[ChristianMurphy]

Yes, this one https://eslint.org/docs/rules/no-unused-vars

Yep, so here we are intentionally not using a variable, a few options:

• // eslint-disable-next-line no-unused-vars to disable the rule for the specific line
• Use a library like https://lodash.com/docs#omit to omit the property
• Use delete to remove the property (though ESLint will flag this https://eslint.org/docs/rules/no-delete-var)
• Discuss further if the ordered property makes sense

[angelolucas]

Thanks, these are great suggestions.

I think the reason for the error is that the boolean value property is being passed to the DOM element, and the DOM elements don't accept boolean as an attribute value.

I think the ideal would be to somehow prevent the prop from being sent to the DOM, so it's still useful for handling in React.

[wooorm]

I think the reason for the error is that the boolean value property is being passed to the DOM element, and the DOM elements don't accept boolean as an attribute value.

They don’t “allow” ordered. It has nothing to do with booleans. It has to do with being a non-standard attribute, which react warns about.

I think the ideal would be to somehow prevent the prop from being sent to the DOM

That is exactly Christian’s suggestion, by using spread, to ignore it, to not pass it through.

[angelolucas]

That is what I'm going to do!
Thank you so much for your time @ChristianMurphy and @wooorm, I appreciate that.

[palaogluserdest]

Hello,
I also got the same error, I searched a lot but I could not find a solution. Then I wanted to examine the props structures coming from your library and I converted all ordered properties defined in ast-to-react.js to string structure. In this way, the error that react cannot come as ordered boolean is removed. Of course, this error occurs when I want to customize all the elements that occur as default and define my own additional properties. I am leaving the necessary pictures below. When I experimented with the library, I did not encounter a general error after these changes.

[ChristianMurphy]

I also got the same error, I searched a lot but I could not find a solution

Did you see the above conversation? There are several solutions.

I converted all ordered properties defined in ast-to-react.js to string structure. In this way, the error that react cannot come as ordered boolean is removed

That is a way to solve it, it is very inadvisable making things stringly typed, but you can do it.

[palaogluserdest]

I tried all the ways mentioned above. I even tried to remove it from the direct props and prevent the ordered value from going, but no matter what I did, ordered continued to go in the props. I would appreciate if a solution is produced for this. It is a library I love and its functionality is incredibly good. Thank you for all your efforts.

[ChristianMurphy]

ordered continued to go in the props

There is a working example of removing it, that you can run from https://github.com/orgs/remarkjs/discussions/873#discussioncomment-1466154
the link to the runnable sandbox https://codesandbox.io/p/sandbox/react-markdown-ordered-list-o0iuh?file=%2Fsrc%2FApp.tsx

[palaogluserdest]

I have undone what I did as you suggested me and made the error occur again and moved the ordered value out of props in the same way. There are a few things I want to show you. I will try to show you in detail from the pictures. I hope my being so persistent will not offend you. I just want to help as much as I can.

[ChristianMurphy]

@palaogluserdest please share code rather than screenshot?
And ideally a runnable example like codesandbox?

[palaogluserdest]

I apologise to you very much. I took the npm i react-markdown@8.0.6 version left on the npm official page without even noticing it and I didn't even notice the current version 10.0.1. In this version, ordered comes as undefined, which is desirable. I noticed the version that came while creating Codesandbox. Instead of writing it directly, I copied it from the npm official page for convenience, but I never noticed the version difference. I would appreciate if you update your npm official page. I apologise again and hope you don't mind.

[ChristianMurphy]

No worries, glad the update resolved it!