title: How to set innerHTML jsx format
body: <p>So I given this code:</p>
  
  <pre><code>render() {
    console.log(this.props, 'ey');
    const var1 = "&lt;div className={{blahblah}} style={{width: '10px'}}&gt;{textvar}&lt;/div&gt;"
  
  
    return (
      &lt;div dangerouslySetInnerHTML={{ __html: `${var1}` }}&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>Of course that's just an example, but the <code>var1</code> should be a big chunk of html file in jsx format, however doing that one renders them as they are and doesn't convert them to regular html.</p>
  
  <p>I also tried setting innerHTML via refs on componentDidMount but same problem happens. </p>
  
  <p>this is what it should look like when it renders:</p>
  
  <pre><code>&lt;div class="blahblah style="width: 10px"}}&gt;the variable text&lt;/div&gt;
  </code></pre>
  
  <p>Any help would greatly appreciated. thanks!</p>