How to set innerHTML jsx format

Question

So I given this code:

render() {
  console.log(this.props, 'ey');
  const var1 = "<div className={{blahblah}} style={{width: '10px'}}>{textvar}</div>"


  return (
    <div dangerouslySetInnerHTML={{ __html: `${var1}` }}>
    </div>
  );
}

Of course that's just an example, but the var1 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.

I also tried setting innerHTML via refs on componentDidMount but same problem happens.

this is what it should look like when it renders:

<div class="blahblah style="width: 10px"}}>the variable text</div>

Any help would greatly appreciated. thanks!

Answer 1

You need to do this to use ES6 interpolated string literals (inaccurately called template literals by the spec):

<div dangerouslySetInnerHTML={{ __html: `${var1}` }}>

But this would be simpler:

<div dangerouslySetInnerHTML={{ __html: var1 }}>

However, in your string for the inner html, you may want to use an interpolated string literal if what you want is to use the values of the blahblah and textvar variables. Note you need to use class instead of className since React will just set the inner html rather than treat it as JSX and className is only for JSX.

const var1 = `<div class=${blahblah}>${textvar}</div>`;

If you are using a class, no need to also use the style keyword. Just set the width in your CSS.

You can see a working example of the above on CodePen.