How to avoid <p> tag about react-markdown

[RemyMachado]

You can vanish the paragraph tag with a React.Fragment.

  return (
    <ReactMarkdown
      components={{
        p: React.Fragment,
      }}
    >
      {children}
    </ReactMarkdown>
  )

[rexxars]

Sorry for not responding earlier, I've been a bit busy with life. You could set Paragraph as a disallowedTypes and set unwrapDisallowed to true. That'll make it a bit hard to handle newlines properly, though - not sure how you want to treat those? Example:

<Markdown
    source="Normally, this *sentence* would be wrapped in a paragraph."
    disallowedTypes={['Paragraph']}
    unwrapDisallowed
/>

Or, you could just replace the renderer for paragraphs with something else:

<Markdown
    source="Normally, this *sentence* would be wrapped in a paragraph."
    renderers={{Paragraph: 'span'}}
/>

This would render <span> instead of <p>, which might not be what you want, but you can use a custom react component instead if you want. Take a look at the readme for more information on the custom renderer feature.

[Fleuv]

This doesn't work in v4.0, please confirm.

Seems like Paragraph got converted to lowercase paragraph. With the lowercase naming it does work.

[vincerubinetti]

Note that as of 2021 (version ???), the parameter names have changed a bit:

<ReactMarkdown
  components={{ p: "span" }}
  ...
>
  {children}
</ReactMarkdown>

And allowedElements / disallowedElements instead of allowedTypes / disallowedTypes

[guillempuche]

You can also enable unwrapDisallowed to true.

My code:
const markdownTypesAllowed = [ 'text', 'strong', 'delete', 'emphasis', 'link' ];

<Markdown source={text} allowedTypes={markdownTypesAllowed} unwrapDisallowed={true} />

[jordanmkoncz]

I was wondering this as well. It would be good if there was some way to avoid having the enclosing <p> tags.

[arisros]

This doesn't work in v4.0, please confirm.

Seems like Paragraph got converted to lowercase paragraph. With the lowercase naming it does work.

paragraph: 'p',

with lowercase p

react-markdown/src/renderers.js

Line 13 in 634f88d

paragraph: 'p',