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 ponentDidMount 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!

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 ponentDidMount 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!

• javascript
• reactjs

• the real question is "why". As "of course, just an example" this is really not good enough - what are you actually doing? Because quite often the solution is "don't use HTML, get your data, and inject it into a ponent properly". – Mike 'Pomax' Kamermans Commented Apr 26, 2017 at 0:43
• 1 @Mike'Pomax'Kamermans Because the client want to do it like this, they want to store it somewhere, a couple of versions of the page, and just update those files/data without having to push another mit. You know that feeling when you tried to argue to the client but still ends up doing what they wanted? :D – I am L Commented Apr 26, 2017 at 14:38
• If the client needs that much flexibility you are going to end up building the React framework for them and they will need to learn to program in React.... I've been down this road and you are opening a can of worms. – Todd Chaffee Commented Apr 26, 2017 at 16:10
• I know that feeling, and I started telling my clients "no", then talking with them to figure out what they need at the site level, not what they want at the code level. The code level is not theirs to decide, unless they're going to write it themselves. Putting HTML on a page is not "storage", your app is the storage, with different levels. In-memory, localStorage, remote db, etc. Also "just update those files/data without having to push another mit" makes no sense. Any static data should be revision controlled, and any change to that is a mit. – Mike 'Pomax' Kamermans Commented Apr 26, 2017 at 18:01

1 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.