没有使用新的HTML更新元素，元素为onMouseEnter，React.JS

Question

非常简单的问题，当我将鼠标悬停在我的页面的导航栏上时（在无序列表中），该选项卡应该使用新值进行更新。值更新，但属性HTML标记不会随之呈现（例如当我尝试将'why'值变为粗体时。我甚至尝试将两个值存储在两个变量中并连接在一起，但仍然没有运气。任何帮助将不胜感激。

导航栏（垂直）的屏幕截图：   

我的默认道具：

 getDefaultProps: function(){
  var text = '<i className="fa fa-laptop"></i>';
  var text2 = '<b>why<b>';
  return{why: text + text2};
},

需要更改的行：

<li value = '3' className = "nav-content" style = {ulTop} onMouseEnter = {this.change} onMouseLeave = {this.out} ref = 'whyTab'><Link to = '/Why'><i className="fa fa-code"></i>{this.props.why}</Link></li>