title: Make input with' hidden=true' value show by changing state in React.JS
body: <p>I'm making a React.js application. I cannot find the way to change the hidden input to show so I decided to post a question here.</p>
  
  <p>The functionality I want to implement :</p>
  
  <p>If you click a text, a checkbox should be appeared. This checkbox is <code>input</code> and there is <code>hidden=true</code>inside the tag.</p>
  
  <p>As long as I know, we can use ternary operator to change the styling inside JSX tag. However ternary operator does not work for hidden element.</p>
  
  <p>Here is <a href="https://codepen.io/aaayumi/pen/qPxZoB" rel="nofollow noreferrer">codepen demo</a>.</p>
  
  <p>The code </p>
  
  <pre><code>class FontChooser extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
      hidden: true
  }
  this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick(){
      this.setState({
          hidden: !this.state.hidden
      })
  }
  
  render() {
  return(
         &lt;div&gt;
         &lt;input type="checkbox" 
             id="boldCheckbox"
             hidden={{ !this.state.hidden ?  'false' : 'true' }}  
             /&gt;
          &lt;span id="textSpan" onClick={this.handleClick}  &gt;
         {this.props.text}              
         &lt;/span&gt;
         &lt;/div&gt;
        );
     }
   }
  
   React.render(
   &lt;div&gt;
   &lt;FontChooser min='4' max='40'  text='Fun with React!' bold='false'/&gt;
   &lt;/div&gt;,
   document.getElementById('container'));
  </code></pre>
  
  <p>Thank you for your kind help!</p>