<p dir="auto">Hi, I created the following component that accepts a raw svg string and transforms it into a react element. The component works; however, on the server, the SVG is being escaped.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="import React, {PropTypes, Component} from 'react';

export default class Svg extends Component {

  static propTypes = {
    svg: PropTypes.string.isRequired,
  }

  render() {
    const {...other, svg} = this.props;
    return (
      &lt;span {...other} dangerouslySetInnerHTML={{__html: svg}}&gt;&lt;/span&gt;
    );
  }

}"><pre class="notranslate"><code class="notranslate">import React, {PropTypes, Component} from 'react';

export default class Svg extends Component {

  static propTypes = {
    svg: PropTypes.string.isRequired,
  }

  render() {
    const {...other, svg} = this.props;
    return (
      &lt;span {...other} dangerouslySetInnerHTML={{__html: svg}}&gt;&lt;/span&gt;
    );
  }

}
</code></pre></div>
<p dir="auto">In the browser console I get this error:</p>
<p dir="auto">"React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server"</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="(client) .1.0.1&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/20
(server) .1.0.1&quot;&gt;&lt;svg xmlns=&quot;\&amp;quot;http://www.w3"><pre class="notranslate"><code class="notranslate">(client) .1.0.1"&gt;&lt;svg xmlns="http://www.w3.org/20
(server) .1.0.1"&gt;&lt;svg xmlns="\&amp;quot;http://www.w3
</code></pre></div>
<p dir="auto">With following code:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="let keyTitlesMap = {
      office:              'Office &amp; &lt;br /&gt; Transport links',
      culturePeople:       'Culture &amp; &lt;br /&gt; people',
      trainingDevelopment: 'Training &amp; &lt;br /&gt; development',
      workLifeBalance:     'Work/Life &lt;br/&gt; balance',
      career:              'Career &lt;br /&gt; progression'
}
let itemTitleHtml = {__html: keyTitlesMap[key]}
return &lt;div dangerouslySetInnerHTML={itemTitleHtml}&gt;&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">let keyTitlesMap = {
      office:              'Office &amp; &lt;br /&gt; Transport links',
      culturePeople:       'Culture &amp; &lt;br /&gt; people',
      trainingDevelopment: 'Training &amp; &lt;br /&gt; development',
      workLifeBalance:     'Work/Life &lt;br/&gt; balance',
      career:              'Career &lt;br /&gt; progression'
}
let itemTitleHtml = {__html: keyTitlesMap[key]}
return &lt;div dangerouslySetInnerHTML={itemTitleHtml}&gt;&lt;/div&gt;
</code></pre></div>
<p dir="auto">There's a warning:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) office.0.0&quot;&gt;Office &amp; &lt;br /&gt; Transport li
 (server) office.0.0&quot;&gt;Office &amp;amp; &lt;br&gt; Transport "><pre class="notranslate"><code class="notranslate">Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
 (client) office.0.0"&gt;Office &amp; &lt;br /&gt; Transport li
 (server) office.0.0"&gt;Office &amp;amp; &lt;br&gt; Transport 
</code></pre></div>
<p dir="auto">Both environments run code from same webpack bundle</p>