title: Pretty Printing JSON with React
body: <p>I'm using ReactJS and part of my app requires pretty printed JSON.  </p>
  
  <p>I get some JSON like: <code>{ "foo": 1, "bar": 2 }</code>, and if I run that through <code>JSON.stringify(obj, null, 4)</code> in the browser console, it pretty prints, but when I use it in this react snippet: </p>
  
  <pre><code>render: function() {
    var json = this.getStateFromFlux().json;
    return (
      &lt;div&gt;
        &lt;JsonSubmitter onSubmit={this.onSubmit} /&gt;
        { JSON.stringify(json, null, 2) }
      &lt;/div&gt;
    );
  },
  </code></pre>
  
  <p>it renders gross JSON that looks like <code>"{ \"foo\" : 2, \"bar\": 2}\n"</code>.  </p>
  
  <p>How do I get those characters to be interpreted properly? {</p>