title: If the “bold” property is set to “true,” the text should be displayed in bold
body: <p>I am looking for help converting a property from a string to a Boolean before page is rendered.  The bold property is going to be either set as a string of 'true' or 'false'.   I have set the state of the property but the string 'false' is still true.  I am currently trying to convert to Boolean in my handleClick function but I need to convert if before the page is rendered.  </p>
  
  <p>HTML </p>
  
  <pre><code>&lt;script type="text/jsx"&gt;
  
  ReactDOM.render(
   &lt;div&gt;
   &lt;FontChooser min='4' max='40' size='16' text='Fun with React!' bold='true'/&gt;
  &lt;/div&gt;, document.getElementById('container'));
  
  &lt;/script&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>class FontChooser extends React.Component {
  
  constructor(props) {
  super(props);
  this.state = {hidden: 'true', size: this.props.size, bold: this.props.bold, min : this.props.min, max: this.props.max, color: 'black'}; 
  
  }
  
  
  handleClick() {
      if(this.state.hidden == 'true') {
          if(this.props.bold == "true") {
              this.setState({bold: true}) 
          } else {
              this.setState({bold: false})
          }
  
          this.setState({hidden: ''});
  
      }
      else {
          this.setState({hidden: 'true'});    
      }           
  }
  
  decrease() {
      if (this.state.size &gt;= Number(this.state.min) +1) 
      this.setState({size: Number(this.state.size) -1});
  
      if(this.state.size == Number(this.state.min) +1|| this.state.size == Number(this.state.min)) {
          this.setState({color: 'red'})
      } else {
          this.setState({color: 'black'})
      }
  }
  
  increase() {
      if (this.state.size &lt;= Number(this.state.max) -1)       
      this.setState({size: Number(this.state.size) +1});  
  
      if(this.state.size == Number(this.state.max) -1|| this.state.size == Number(this.state.max)) {
          this.setState({color: 'red'})
      } else {
          this.setState({color: 'black'})
      }
  
  
  }
  
  toggle() {
      this.setState({bold: !this.state.bold});
  }
  
  
  
  
  
  render() {
  
      var weight = this.state.bold ? 'bold' : 'normal';       
      var checked = this.state.bold ? 'true' : '';
  
      var inlineStyle = {
          fontSize: this.state.size,
          fontWeight: weight,         
      };
  
      var fontSizeSpanStyle = {
          color: this.state.color
      }
  
  
  
  
  
  return(
  
         &lt;div&gt;
         &lt;input type="checkbox" id="boldCheckbox" checked={checked} hidden={this.state.hidden}onClick={this.toggle.bind(this)} /&gt;
         &lt;button id="decreaseButton" hidden={this.state.hidden} onClick={this.decrease.bind(this)} &gt;-&lt;/button&gt;
         &lt;span id="fontSizeSpan" hidden={this.state.hidden} style={fontSizeSpanStyle} &gt;{this.state.size}&lt;/span&gt;
         &lt;button id="increaseButton" hidden={this.state.hidden} onClick={this.increase.bind(this)} &gt;+&lt;/button&gt;
         &lt;span id="textSpan" onClick={this.handleClick.bind(this)} style={inlineStyle} &gt;{this.props.text}
         &lt;/span&gt;       
         &lt;/div&gt;
  );
  }
  }
  </code></pre>