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

Question

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

Thomas Upton · Accepted Answer · 2020-06-16 20:15:58Z

2

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.

answered Jun 16, 2020 at 20:15

Thomas Upton

1,9191 gold badge13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

john Over a year ago

Can I incorporate React Markdown components into another component? I think the answer is yes.

Thomas Upton Over a year ago

I'm not sure exactly what you're asking, but a react markdown component is just like any other component and it can indeed be composed with or into other components.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related