CODEWITHSUNDEEP
reactjsmarkdown
john
john

Reputation: 17

Markdown method in React. Not getting a return value that is in html

I would like to create a method in React using markdown, simply to receive a string like "Hello World!" and render it in html. At the moment my program is returning the string "Hello World!" without rendering it in html.


    import React from 'react';
    import ReactMarkdown from "react-markdown";

       class App extends React.Component 
       {
         constructor(props){
         super(props)
         this.changeToMarkdown = this.changeToMarkdown.bind(this)
       }



        changeToMarkdown(str)
        {
        var markdown = require( "markdown" ).markdown;
         return markdown.toHTML(str);
        }


       render()
       {

          return (
             <div>
                <p>{this.changeToMarkdown("Hello *World*!")}</p>
             </div>
            )
        } 
    }    

    export default App

Upvotes: 0

Views: 364

Answers (1)

Thomas Upton
Thomas Upton

Reputation: 1899

You're already importing react-markdown; why not use it?

render() {
  return (
    <div>
      <ReactMarkdown>{"Hello *World*!"}</ReactMarkdown>
    </div>
  );
}

Here's a simple CodePen that shows this in action.

Upvotes: 2

Related Questions