.js

class Main extends React.component{
  constructor(props){
    super(props);
    this.updateDimensions = this.updateDimensions.bind(this);
  }
  componentDidMount() {
    this.updateDimensions();
    window.addEventListener("resize", this.updateDimensions);
  }
  updateDimensions() {
    if(window.innerWidth < 768) {
      if(this.state.formView != "mobile"){
        this.setState({
          formView: "mobile",
        });
      }
    }
    else{
      if(this.state.formView != "desktop"){
        this.setState({
          formView: "desktop",
        });
      }
    }
  }
  render(){
    return(
      <Button fontColor={this.state.formView === "desktop" ? "grey" : "blue"} />
    )
  }
}
export default Main;

class Button extends React.Component {
  backgroundColor = "white";
  fontColor = "#4a4a4a"
  activeBackgroundColor = "#ff5122";
  activeFontColor = "white";

  constructor(props){
    super(props);
    this.handleToggle = this.handleToggle.bind(this);
  }

  handleToggle(id,value){
    if(typeof this.props.onClick === "function"){
      this.props.onClick(this.props.id, this.props.value)
    }
  }
  shouldComponentUpdate(nextProps,nextState){
    if(nextProps == this.props){
      return false
    }else{
      return true
    }
  }
  initStyle(){
    if(this.props.backgroundColor != undefined && this.props.backgroundColor != this.backgroundColor){
      this.backgroundColor = this.props.backgroundColor;
    }
    if(this.props.fontColor != undefined && this.props.fontColor != this.fontColor){
      this.fontColor = this.props.fontColor;
    }
    if(this.props.activeBackgroundColor != undefined && this.props.activeBackgroundColor != this.activeBackgroundColor){
      this.activeBackgroundColor = this.props.activeBackgroundColor;
    }
    if(this.props.activeFontColor != undefined && this.props.activeFontColor != this.activeFontColor){
      this.activeFontColor = this.props.activeFontColor;
    }
    if(this.props.backgroundColor != undefined && this.props.backgroundColor != this.backgroundColor){
      this.backgroundColor = this.props.backgroundColor;
    }
  }
  render(){
    this.initStyle();
    return (
        <div className={this.props.id == this.props.activeToggle ? 'toggle active':'toggle inactive'} onClick={this.handleToggle}>
          {this.props.value}

          <style jsx>
          {`
            .toggle {
              width: 50%;
              height: 50px;
              border-radius: 100px;
              line-height: 50px;
              float: left
            }
            .active{
              color: ${this.activeFontColor};
              background-color: ${this.activeBackgroundColor}
              border-radius:100px;
            }
            .inactive{
              cursor: pointer;
              color: ${this.fontColor};
            }
          `}
          </style>
      </div>
    )
  }
}

export default Button;