使用字符串作为带有reactDOM.render，marked.js和babel的输入

Question

So I am attempting to build a git markdown previewer using React, babel and marked.js. Marked.js is a markdown parser.

So say I have a value that I want to use from my html.

<div id="markdownInput"># This is my input</div>

In javascript, I store it as the variable myInput.

var myInput = document.getElementById("markdownInput").value;

myInput is now "# This is my input" and is a string. Marked.js uses a function called "marked()" that takes a string as input and converts the git markdown to html.

var myOutput = marked(myInput);

myOutput is now equal to:

"<h1>This is my input</h1>"

Notice that the markdown is converted (# =>h1) but it is also stored as a string. If I attempt to use this with reactDOM.render like so:

ReactDOM.render(myOutput, document.getElementById("output-container"));

My "output-container" in my HTML ends up with displaying:

<h1>This is my input</h1>

rather than displaying " This is my input " in large header letters. What it boils down to is that React.DOM.render() needs an object as input and not a string. It needs:

<h1>This is my input</h1>

As an object but I am inputting it as a string because the marked() function only outputs as a string (which wraps everything in quotes).

Is there anything that I can do to convert myOutput to an object? I am extremely knew to React so perhaps I haven't learned a better method for something like this.

Thanks

Answer 1

Well, found this Using marked in react and used the "dangerouslySetInnerHTML" attribute. Is there perhaps a better way to do this though?