title: Render curly braces as plain text in React/JSX
body: <p>I am having problems displaying { and } as text in React. I saw a similar question that someone said to wrap the entire string in curlies, but this is not working:</p>
  
  <pre><code>let queries_block = this.state.previous_queries.map((dataset) =&gt; {
              return (&lt;p&gt;{"{{}}"}&lt;p&gt;)
          });
  
          if (results) {
              results_block = (
                  &lt;div&gt;
                      &lt;p&gt;Queries:&lt;/p&gt;
                      {queries_block}
                      &lt;br/&gt;&lt;br/&gt;
                      &lt;p&gt;Results: {results_count}&lt;/p&gt;
                      &lt;JSONPretty id="json-pretty" json={results}&gt;&lt;/JSONPretty&gt;
                  &lt;/div&gt;
              );
          } else {
              results_block = null;
          }
  </code></pre>
  
  <p>The <code>return (&lt;p&gt;{"{{}}"}&lt;p&gt;)</code> causes </p>
  
  <pre><code>ERROR in ./src/components/app.js
  Module build failed: SyntaxError: Unexpected token, expected } (47:13)
  
    45 |                     &lt;JSONPretty id="json-pretty" json={results}&gt;&lt;/JSONPretty&gt;
    46 |                 &lt;/div&gt;
  &gt; 47 |             );
       |              ^
    48 |         } else {
    49 |             results_block = null;
    50 |         }
  
   @ ./src/index.js 15:11-38
  webpack: Failed to compile.
  </code></pre>
  
  <p>Is there an easy way to escape curly braces in jsx?</p>