how to display react variable in render function using ternary operator

Question

why doesn\'t \'hidden\' get added to the input tag?

class FontChooser extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hidde         


        

Answer 1

<input type={this.state.hidden ? 'hidden' : 'checkbox'} id="boldCheckbox"  />

Answer 2

You can use inline styles to hide

<input type="checkbox" id="boldCheckbox" style={this.state.hidden ? {display: 'none'} : {} />

Or you can use classes to hide

<input type="checkbox" id="boldCheckbox" className={this.state.hidden ? classes.hidden : ''} />

If you just don't want to render it

{!this.state.hidden &&
<input type="checkbox" id="boldCheckbox" />
}

Answer 3

<input type="checkbox" id="boldCheckbox" {...this.state} />

or

<input type="checkbox" id="boldCheckbox" hidden={this.state.hidden} />