class Formatter extends React.Component {

  state = {
    format: false,input: ""
  }

  handleChange = () => {
    this.setState({
      input: event.target.value
    })
  }

  handleFormatChange = () => {
    this.setState({
      format: !this.state.format
    })
  }

  render() {
    var input = this.state.format 
    ? <b> {this.state.input} </b> 
    : <p> {this.state.input} </p>

    return ( 
      <div>
         Bold <input type="checkbox"
                     onChange = {
                       this.handleFormatChange
                     }
              />
              <br />
              <input value={this.state.input}
                     onChange = {this.handleChange}
              /> 
              <br/>
              {input} 
      </div>
    );
  }
}


ReactDOM.render( <
  Formatter / >,document.getElementById('root')
);

p {
  margin-top: 0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root">
  <!-- This element's contents will be replaced with your component. -->
</div>