title: React rendering variable with html characters escaped
body: <p>I am learning React and have run into the following situation:</p>
  
  <p>I have a string variable that I am passing as a prop to different components to be rendered by JSX.</p>
  
  <p>When the component and its sub-components are rendered, the string does not render html special characters, instead rendering the character code as text.</p>
  
  <p>How can I get the variable to render as html?</p>
  
  <p>Here is the code for a component that works completely, except that the <code>tempUnitString</code> variable renders as <code>&amp;deg; K</code>, while the <code>&lt;th&gt;</code> below renders its units as &deg; K.</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import Chart from '../components/chart';
  import GoogleMap from '../components/google_map'
  
  class WeatherList extends Component {
    renderWeather(cityData, tempUnits){
      const name = cityData.city.name;
      const id = cityData.city.id;
      const humidity = cityData.list.map(weather =&gt; weather.main.humidity);
      const pressure = cityData.list.map(weather =&gt; weather.main.pressure);
      const { lon, lat } = cityData.city.coord;
      let temp = cityData.list.map(weather =&gt; weather.main.temp);
      if (tempUnits === "K"){
          temp = cityData.list.map(weather =&gt; weather.main.temp);
      } else if (tempUnits === "F"){
          temp = cityData.list.map(weather =&gt; weather.main.temp * 9/5 - 459.67);
      } else {
          temp = cityData.list.map(weather =&gt; weather.main.temp - 273.15);
      }
      let tempUnitString = "&amp;deg; " + tempUnits;
  
      return (
        &lt;tr key={ id }&gt;
          &lt;td&gt;&lt;GoogleMap lat={ lat } lon={ lon } /&gt;&lt;/td&gt;
          &lt;td&gt;
            &lt;Chart color="red" data={ temp } units={ tempUnitString } /&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;Chart color="green" data={ pressure } units=" hPa" /&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;Chart color="orange" data={ humidity } units="%" /&gt;
          &lt;/td&gt;
        &lt;/tr&gt;);
    }
    render() {
      const tempUnits = this.props.preferences.length &gt; 0 ? this.props.preferences[0].tempUnits : "K";
  
      return (
        &lt;table className="table table-hover"&gt;
          &lt;thead&gt;
            &lt;tr&gt;
              &lt;th&gt;City&lt;/th&gt;
              &lt;th&gt;Temperature (&amp;deg; { tempUnits })&lt;/th&gt;
              &lt;th&gt;Pressure (hPa)&lt;/th&gt;
              &lt;th&gt;Humidity (%)&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            { this.props.weather.map( item =&gt; this.renderWeather(item,tempUnits) ) }
          &lt;/tbody&gt;
        &lt;/table&gt;
      );
    }
  
  
  }
  
  function mapStateToProps({ weather, preferences }){// { weather } is shorthand for passing state and { weather:state.weather } below
    return { weather, preferences }; // === { weather:weather }
  }
  
  export default connect(mapStateToProps)(WeatherList);
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Using the documentation passed to me by @James Ganong I set up a boolean prop on the subcomponent <code>isTemp</code> and based on that created a JSX variable.</p>
  
  <p>The subcomponent (minus includes and func definitions) looks like this:</p>
  
  <pre><code>export default (props) =&gt; {
    let tempDeg = '';
    if (props.isTemp){
      tempDeg = &lt;span&gt;&amp;deg;&lt;/span&gt;;
    }
    return (
      &lt;div&gt;
        &lt;Sparklines height={ 120 } width={ 100 } data={ props.data }&gt;
          &lt;SparklinesLine color={ props.color } /&gt;
          &lt;SparklinesReferenceLine type="avg" /&gt;
        &lt;/Sparklines&gt;
        &lt;div&gt;{ average(props.data)} { tempDeg }{ props.units }&lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>The call to it looks like this:</p>
  
  <p><code>&lt;Chart color="red" data={ temp } units={ tempUnits } isTemp={ true } /&gt;</code></p>