title: < and > converted into &lt; &gt; in React js render
body: <p>I'm trying to build Markdown previewer with React and <a href="https://github.com/chjj/marked" rel="nofollow noreferrer">marked</a>. Here is my code:  </p>
  
  <pre><code>var Input = React.createClass({
  
    getInitialState: function() {
      return {typed: 'I am using __markdown__.'};
    },
    onChange: function(event) {
      this.setState({typed: event.target.value});
    },
    render: function() {
  
      const element = (
        &lt;div id="container"&gt;
        &lt;div id="input-container"&gt;
          &lt;textarea class="form-control" rows="20" id="main-input" onChange={this.onChange.bind(this)}/&gt;
        &lt;/div&gt;
        &lt;div id="result-container"&gt;
          {marked(this.state.typed)}
        &lt;/div&gt;
        &lt;/div&gt;
      );
      return element;
    }
  });
  React.render(&lt;Input/&gt;, document.querySelector('div'));
  </code></pre>
  
  <p>The result is this: </p>
  
  <pre><code>&lt;div id="result-container" data-reactid=".0.1"&gt;&amp;lt;p&amp;gt;I am using &amp;lt;strong&amp;gt;markdown&amp;lt;/strong&amp;gt;.&amp;lt;/p&amp;gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Why is this happening? How should I fix it? (I tried to replace all the &lt; and &gt; with &lt; and > inside render. But that didn't work)</p>