title: Element not being updated with new HTML, with element onMouseEnter, React.JS
body: <p>Really simple problem where when I hover over the navigation bar of my page (in a unordered list), the tab is supposed to update with a new value. The value updates, but the attributing HTML markup does not render along with it (such as when I tried to make the 'why' value bold. I tried even storing both of the values in two variables and concat together, but still no luck. Any help would be appreciated. </p>
  
  <p>Screenshot of Nav Bar (Vertical):
    <a href="https://i.stack.imgur.com/xhYEC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xhYEC.png" alt="enter image description here"></a></p>
  
  <p>My Default Props:</p>
  
  <pre><code> getDefaultProps: function(){
    var text = '&lt;i className="fa fa-laptop"&gt;&lt;/i&gt;';
    var text2 = '&lt;b&gt;why&lt;b&gt;';
    return{why: text + text2};
  },
  </code></pre>
  
  <p>Line needing to be changed: </p>
  
  <pre><code>&lt;li value = '3' className = "nav-content" style = {ulTop} onMouseEnter = {this.change} onMouseLeave = {this.out} ref = 'whyTab'&gt;&lt;Link to = '/Why'&gt;&lt;i className="fa fa-code"&gt;&lt;/i&gt;{this.props.why}&lt;/Link&gt;&lt;/li&gt;
  </code></pre>