React - toggle state

Question

import React from 'react';  

class MainComponent extends React.Component {
  constructor() {
        super();
        this.state = {
            shown: true,
        };
  }	
  
  toggle() {
        this.setState({
            shown: !this.state.shown
        });
  }
  
  render() {
    const { data } = this.props;
    const shown = {
      display: this.state.shown ? "block" : "none"
    };
    
    const hidden = {
      display: this.state.shown ? "none" : "block"
    }
    return (
      <div className="main-component">
        <button onClick={this.toggle.bind(this)}>Show calculator</button>
        <div className="display-hidden" style={ hidden }><MortgageCalculatorComponent MortgageCalculatorData={data} /></div>
      </div>
    )
  }
}
export default MainComponent;