Ordered list using react-markdown

Question

I am trying to render an ordered list using react-markdown:

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm'

const MyComponent = () => {
    const markdown = `<ol><li>Item1</li><li>Item2</li></ol>`;
    return (
       <ReactMarkdown children={markdown} remarkPlugins={[remarkGfm]} />
    );
}

The output is the string <ol><li>Item1</li><li>Item2</li></ol>. What am I missing?

score 2 · Accepted Answer · answered Nov 14 '21 at 11:38

As stated in the react-markdown docs (Appendix A), in order to render raw HTML within a ReactMarkdown component you will need the rehypeRaw plugin.

import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";

const markdown = `<ol><li>Item 1</li><li>Item 2</li><li>Item 3</li></ol>`;

const RootElement = () => {
  return <ReactMarkdown rehypePlugins={[rehypeRaw]} children={markdown} />;
};

I've prepared a simple CodePen too

Ordered list using react-markdown

1 Answers1