I'm working on the markdown-previewer that will help me to learn REact). I use a "Marked" library (A full-featured markdown parser and compiler, written in JavaScript). After I had input text in the textarea - Raw HTML displayed in the div id="outputText". What should I do to make browser display rendered html. Here's the code:
class Input extends React.Component {
constructor(props) {
super(props);
this.state = {
_text: ""
};
}
handleChange(e) {
this.setState({
_text: marked(e.target.value)
});
}
componentDidMount
render() {
return ( < div className = "headDiv" >
< textarea onChange = {
this.handleChange.bind(this)
}
id = "inputText"
rows = "25"
cols = "100" / >
< div id = "outputText" > {
this.state._text
} < /div>
</div >
);
}
}
ReactDOM.render( < Input / > , document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>