1

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>
Taras Yaremkiv
  • 3,440
  • 7
  • 32
  • 54

0 Answers0