CODEWITHSUNDEEP
reactjsmarkdown
Jai
Jai

Reputation: 53

markdown-it render returning string but html not being parsed

I am using markdown-it to parse markup documents. My code is as follows: 

import React from 'react';
import Markdown from 'markdown-it';

const md = new Markdown();

export default () => {
  return (
    <div>
    {
      md.render('# markdown-it rulezz!')
    }
    </div>
  );
}

The h1 being returned is correct, but the output is not registering as an h1; the h1 is considered part of the string - it's not being recognized as a tag. See attachment. Can someone please tell me what I'm doing wrong here? Thanks!

enter image description here

Upvotes: 1

Views: 2994

Answers (2)

Serdar Karaca
Serdar Karaca

Reputation: 143

No problem when using it like this ;

<p dangerouslySetInnerHTML={ {__html: PostItem.Content} } />

But when he does this, he gives an error

<p dangerouslySetInnerHTML={{__html: md.render(PostItem.Content)}}></p>

The error message is as follows ;

Error: Input data should be a String

Upvotes: 0

dominik791
dominik791

Reputation: 752

You should use:

<div dangerouslySetInnerHTML={{__html: md.render('# markdown-it rulezz!')}}></div>

Here's reference: https://zhenyong.github.io/react/tips/dangerously-set-inner-html.html

Or you can you use react-markdown

Upvotes: 2

Related Questions