title: Rendering raw html with reactjs
body: <p>So is this the only way to render raw html with reactjs?</p>
  
  <pre><code>// http://facebook.github.io/react/docs/tutorial.html
  // tutorial7.js
  var converter = new Showdown.converter();
  var Comment = React.createClass({
    render: function() {
      var rawMarkup = converter.makeHtml(this.props.children.toString());
      return (
        &lt;div className="comment"&gt;
          &lt;h2 className="commentAuthor"&gt;
            {this.props.author}
          &lt;/h2&gt;
          &lt;span dangerouslySetInnerHTML={{__html: rawMarkup}} /&gt;
        &lt;/div&gt;
      );
    }
  });
  </code></pre>
  
  <p>I know there are some cool ways to markup stuff with JSX, but I am mainly interested in being able to render raw html (with all the classes, inline styles, etc..). Something complicated like this:</p>
  
  <pre><code>&lt;!-- http://getbootstrap.com/components/#dropdowns-example --&gt;
  &lt;div class="dropdown"&gt;
    &lt;button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"&gt;
      Dropdown
      &lt;span class="caret"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"&gt;
      &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
      &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I would not want to have to rewrite all of that in JSX.</p>
  
  <p>Maybe I am thinking about this all wrong. Please correct me.</p>