Making font weight bold by passing value in React.js

Question

I want to change a font weight from normal to bold by clicking checkbox input.

I tried to apply a ternary operator but it didn't work.

bold={ this.state.checkboxState ? this.props.bold : !this.props.bold }

What is the best way to implement this functionality?

Here is a codepen demo.

The code

class FontChooser extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            hidden: true,
            checkboxState : true
        }
    }
    toggle(e) {
        this.setState({
            checkboxState : !this.state.checkboxState
        })
        console.log(!this.state.isChecked)
    }

    render() {
        return(
            <div>
                <input type="checkbox" 
                    id="boldCheckbox"
                    checked={this.state.isChecked}
                    onClick={this.toggle.bind(this)}
                />
               <span 
                   id="textSpan" 
                   bold={ this.state.checkboxState ? this.props.bold : !this.props.bold }
               >
                   {this.props.text}
               </span>
           </div>
       );
    }
}

React.render(
    <div>
        <FontChooser text='Fun with React!' bold='false' />
    </div>,
    document.getElementById('container')
);

Thank you for your kind advice.

Answer 1

Change <span id="textSpan"> to the following:

<span 
    id="textSpan" 
    style={ this.state.checkboxState ? { fontWeight: 'normal' } : { fontWeight: 'bold' } }
>
    { this.props.text }
</span>