React-markdown: <div> cannot appear as a descendant of <p>.

[smmoosavi]

I am setting imageReference in renderers wich wrap img with div and I got this error

const imageRenderer = ({src, alt}) => {
  return (
    <div className="markdown-image__wrapper">
      <img src={src} alt={alt || ''}/>
    </div>
  )
}

const renderers = {imageReference: imageRenderer}
const md = <ReactMarkdown source={value}renderers={renderers}/>

error:

Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>.
    in div (at ...)
    in imageRenderer (created by ReactMarkdown)
    in p (created by ReactMarkdown)
    in div (created by ReactMarkdown)

how I can fix this?

Note: It render correctly, but error shown in console

[Charlicus]

I would really like to know that to if someone finds the solution..

[EKMN]

I used something like this to fix img-tags from being wrapped in p-tags:

const ParagraphRenderer = ({ children }) => {
  const hasImage = !!children.find(
    (child) => typeof child === 'object' && child.key && !!child.key.match(/image/g)
  )
  return hasImage ? children : <p>{children}</p>
}

[DoneDeal0]

The issue happens because you can't have div inside of a paragraph. So You may write:

<ReactMarkdown source={yourContent} renderers={{ paragraph: props => <div {...props} />, }} />

Now, the paragraph becomes a div, and there is no more troubles ;).

[yassinebridi]

Or you can check, if it is an image make the container as a div, other than that make the container as a paragraph.

like this:

<ReactMarkdown
  source={source}
  renderers={{
    paragraph: props =>
      props.children[0].type.name === "image" ? (
        <div {...props} />
      ) : (
        <p {...props} />
      )
  }}
/>

one could argue this better for the sake of SEO

[magoz]

@EKMN and @yassinebridi code didn't work for me.

Here is how I removed <p> tags around images:

const imagesWithoutPTags = (props) => {
  const element = props.children[0];
  return element.type === 'img' ? { ...element } : <p {...props} />;
};

<ReactMarkdown
  source={source}
  escapeHtml={false}
  renderers={{paragraph: imagesWithoutPTags}}
/>

[circuitsyn]

Thank you @magoz ! This did the trick for me :D

[wooorm]

Markdown does not allow images outside of paragraphs/headings, so you can’t just add a div there.

You can unwrap them though, e.g., with https://github.com/remarkjs/remark-unwrap-images. Or you can make your own plugin.

[SalahAdDin]

@magoz Your solution just works with isolated images.
@EKMN your solution makes inline images with div but their companion text out to any tag.
@wooorm I'm trying to use it but it does not work for me.

[wooorm]

Why not?

[SalahAdDin]

@wooorm I don't know, I'm passing it like:

import unwrapImages from "remark-unwrap-images"

const _mapProps = (props) => ({
  ...props,
  escapeHtml: false,
  plugins: [
    // RemarkMathPlugin,
    // RemarkHighlightPlugin,
    unwrapImages,
    VideoPlugin,
  ],
  renderers: {
    ...props.renderers,
    // math: ({ value }) => <BlockMath>{value}</BlockMath>,
    // inlineMath: ({ value }) => <InlineMath>{value}</InlineMath>,
    code: CodeBlock,
    image: ImageBlock,
    video: VideoBlock,
    paragraph: ParagraphBlock,
  },
})

const Content = (props) => <ReactMarkdown {..._mapProps(props)} />

But it does not unwrap the image.

[wooorm]

And if you try the v5 branch? https://github.com/remarkjs/react-markdown/commits/v5

[SalahAdDin]

@wooorm, how can I install it? because it is not available right now.

[wooorm]

npm can install from git(hub): npm install remarkjs/remark#v5

[SalahAdDin]

@wooorm
I'm getting this problem all time: Module not found: Can't resolve 'react-markdown'

[wooorm]

whoops, that was a typo, as we’re talking about react-markdown here, it should’ve been: npm install remarkjs/react-markdown#v5

[SalahAdDin]

@wooorm Actually i installed it like that but it didn't work even when the package was installed.

[wooorm]

Hmm, I guess a dist/ is built from src/ here, so you’re missing that. An alternative is to clone this project, npm install and npm link it, and then use the link locally.

But, this works for me. It might be because I’m on v5. We’re launching a version soon that’ll definitely support this: https://github.com/remarkjs/react-markdown/issues/470

[SalahAdDin]

@wooorm Thanks, it is great.