title: Create an interactive SVG component using React
body: <p>Let's say I have an SVG element with paths for all US states.</p>
  
  <pre><code>&lt;svg&gt;
      &lt;g id="nh"&gt;
          &lt;title&gt;New Hampshire&lt;/title&gt;
          &lt;path d="m 880.79902,142.42476 0.869,-1.0765 1.09022,..." id="NH" class="state nh" /&gt;
      &lt;/g&gt;
      ...
  &lt;/svg&gt;
  </code></pre>
  
  <p>The SVG data is saved in a separate file with a <code>.svg</code> extension. Say I want to create a React component of that map, with complete control over it so that I can modify the styling of individual states based on some external input.</p>
  
  <p>Using Webpack, as far as I can tell, I have two options for loading the SVG markup: Insert it as raw markup using the <a href="https://github.com/webpack/raw-loader" rel="noreferrer">raw-loader</a> and create a component using <code>dangerouslySetInnerHTML</code>:</p>
  
  <pre><code>var InlineSvg = React.createClass({
    render() {
      var svg = require('./' + this.props.name + '.svg');
      return &lt;div dangerouslySetInnerHTML={{__html: svg}}&gt;&lt;/div&gt;;
    }
  });
  </code></pre>
  
  <p>or manually convert the markup to valid JSX:</p>
  
  <pre><code>var NewComponent = React.createClass({
    render: function() {
      return (
          &lt;svg&gt;
              &lt;g id="nh"&gt;
                  &lt;title&gt;New Hampshire&lt;/title&gt;
                  &lt;path d="m 880.79902,142.42476 0.869,-1.0765 1.09022,..." id="NH" className="state nh" /&gt;
              &lt;/g&gt;
              ...
          &lt;/svg&gt;
      );
  });
  </code></pre>
  
  <p>Finally, let's say that in addition to the SVG map, there's a simple HTML list of all the states. Whenever a user hovers over a list item, the corresponding SVG path should shift fill color.</p>
  
  <p>Now, what I can't seem to figure out is how to update the React SVG component to reflect the hovered state. Sure, I can reach out into the DOM, select the SVG state by classname and change its color, but that doesn't seem to be the "react" way to do it. A pointing finger would be much appreciated.</p>
  
  <p>PS. I'm using Redux to handle all communication between components.</p>