ReactDom.render is returning different type than what I need, how to address it ?

[ishandutta2007]

Beside Markdown rendering I need to parse the html which is passed as string (ie variable children) as well.
I am using *.tsx
You can assume, children is a html passed as string
and isParseRequired is passed as true

import cx from 'classnames'
import 'github-markdown-css'
import 'katex/dist/katex.min.css'
import { FC, ReactNode, useEffect, useMemo, useState } from 'react'
import { CopyToClipboard } from 'react-copy-to-clipboard'
import { BsClipboard } from 'react-icons/bs'
import ReactDom from 'react-dom'
import ReactMarkdown from 'react-markdown'
import reactNodeToString from 'react-node-to-string'
import rehypeHighlight from 'rehype-highlight'
import remarkBreaks from 'remark-breaks'
import remarkGfm from 'remark-gfm'
import remarkMath from 'remark-math'
import supersub from 'remark-supersub'
import Tooltip from '../Tooltip'
import './markdown.css'

const Markdown: FC<{ children: string, isParseRequired?: boolean}> = ({ children, isParseRequired = false }) => {
    return ReactDom.render(
      <ReactMarkdown
        remarkPlugins={[remarkMath, supersub, remarkBreaks, remarkGfm]}
        rehypePlugins={[[rehypeHighlight, { detect: true, ignoreMissing: true }]]}
        className={`markdown-body markdown-custom-styles !text-base font-normal`}
        linkTarget="_blank"
        components={{
          a: ({ node, ...props }) => {
            if (!props.title) {
              return <a {...props} />
            }
            return (
              <Tooltip content={props.title}>
                <a {...props} title={undefined} />
              </Tooltip>
            )
          },
          code: ({ node, inline, className, children, ...props }) => {
            if (inline) {
                return (
                  <code className={className} {...props}>
                    {children}
                  </code>
                )
            }
            return <CustomCode className={className}>{children}</CustomCode>
          },
        }}
        children={children}/>,
        document.body)
}

export default Markdown

Error I am getting is :
src/app/components/Markdown/index.tsx:48:7 - error TS2322: Type '({ children, isParseRequired }: { children: string; isParseRequired?: boolean | undefined; }) => void | Element' is not assignable to type 'FC<{ children: string; isParseRequired?: boolean | undefined; }>'.

[remcohaszing]

Hi @ishandutta2007 👋

Your issue is related to how you’re using react-dom, not to remark. Your application should have one ReactDom.render() call to bootstrap your React application. FC on the other hand is short for FunctionComponent and is intended to define a React component.

You probably meant to write something like this:

import cx from 'classnames'
import 'github-markdown-css'
import 'katex/dist/katex.min.css'
import { FC, ReactNode, useEffect, useMemo, useState } from 'react'
import { CopyToClipboard } from 'react-copy-to-clipboard'
import { BsClipboard } from 'react-icons/bs'
import ReactDom from 'react-dom'
import ReactMarkdown from 'react-markdown'
import reactNodeToString from 'react-node-to-string'
import rehypeHighlight from 'rehype-highlight'
import remarkBreaks from 'remark-breaks'
import remarkGfm from 'remark-gfm'
import remarkMath from 'remark-math'
import supersub from 'remark-supersub'
import Tooltip from '../Tooltip'
import './markdown.css'

const Markdown: FC<{ children: string, isParseRequired?: boolean}> = ({ children, isParseRequired = false }) => {
    return (
      <ReactMarkdown
        remarkPlugins={[remarkMath, supersub, remarkBreaks, remarkGfm]}
        rehypePlugins={[[rehypeHighlight, { detect: true, ignoreMissing: true }]]}
        className={`markdown-body markdown-custom-styles !text-base font-normal`}
        linkTarget="_blank"
        components={{
          a: ({ node, ...props }) => {
            if (!props.title) {
              return <a {...props} />
            }
            return (
              <Tooltip content={props.title}>
                <a {...props} title={undefined} />
              </Tooltip>
            )
          },
          code: ({ node, inline, className, children, ...props }) => {
            if (inline) {
                return (
                  <code className={className} {...props}>
                    {children}
                  </code>
                )
            }
            return <CustomCode className={className}>{children}</CustomCode>
          },
        }}
        children={children}
      />
    )
}

ReactDom.render(<Markdown />, document.body)

[ishandutta2007]

@remcohaszing I may have multiple of these. One ReactDom.render() for entire app is not a constraint I can work with.

[ChristianMurphy]

@ishandutta2007 do read the links, your question indicates a fundamental misunderstanding of the component model react uses.
react-markdown is a component, and if you want to wrap it in another function component, it needs to be returned as JSX as @remcohaszing shows.

Your initial example includes ReactDom.render(), ReactDom.render() is how your application is attached to the page and is independent from how to wrap as a functional component.
Usually there is just ReactDom.render() on the page, but it is possible to have more than one also.

[ishandutta2007]

The ReactMarkdown is part of a App where the root was created like this:

const container = document.getElementById('app')!
const root = createRoot(container)
root.render(<RouterProvider router={router} />) 

The above FC is way down the dome tree.
And as I mentioned above I may need to show multiple ReactMarkdown on the app at the same time.

[ishandutta2007]

I posted the same question on stackoverflow, There someone suggested a working solution that uses rehypePlugin named rehypeRaw .
So now the problem statement can be refined to:

Problem Statement : How to use react-markdown to render a markdown element whose children is raw text to be parsed as html such that return type is FC without using any 3rd party plugin(ie only using remarkjs stuff)?

[ChristianMurphy]

@ishandutta2007 please read the documentation, your question is answered with examples, and discussion on how to secure it.
https://github.com/remarkjs/react-markdown#appendix-a-html-in-markdown
https://github.com/remarkjs/react-markdown#security

[ishandutta2007]

Well then rehypeRaw plugin is the go-to way as per your docs as well. cool.