Dynamic Button with state

dynamicButtonState.tsx

import * as React from 'react';
import { PropertyControls, ControlType } from 'framer';
import { NumberControlDescription } from 'framer/types/src/render';

// Define type of property
interface Props {
  width: Number;
  height: number;
  label: string;
  buttonType: string;
}

interface State {
  buttonState: string;
}

export class Button extends React.Component<Partial<Props>, State> {
  // Set default properties
  static defaultProps = {
    width: 100,
    height: 44,
    label: 'Button',
    buttonType: 'primary'
  };

  // Items shown in property panel
  static propertyControls: PropertyControls = {
    label: { type: ControlType.String, title: 'Label' },
    buttonType: {
      type: ControlType.Enum,
      options: ['primary', 'secondary', 'tertiary'],
      optionTitles: ['primary', 'secondary', 'tertiary']
    }
  };

  state: State = {
    buttonState: 'primary'
  };

  //intializes button and sets state to primary
  componentDidMount() {
    this.onButtonTypeChange();
  }

  //updates the button state whenever the buttonType prop is changed
  componentDidUpdate(prevProps) {
    if (this.props.buttonType != prevProps.buttonType) {
      this.onButtonTypeChange();
    }
  }

  //function to track change of buttonType prop and set the bg to the appropriate color and change the state
  onButtonTypeChange() {
    const { buttonType } = this.props;
    let bg = '';
    switch (buttonType) {
      case 'primary':
        bg = 'blue';
        break;
      case 'secondary':
        bg = 'red';
        break;
      case 'tertiary':
        bg = 'gray';
        break;
      default:
        bg = 'blue';
        break;
    }
    this.setState({ buttonState: bg });
  }

  render() {
    const { width, height, buttonType } = this.props;
    return (
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          height: height,
          padding: '8px 16px',
          borderRadius: '100px',
          textAlign: 'center',
          color: 'white',
          // Easily set the color to the current state
          background: this.state.buttonState
        }}
      >
        {this.props.label}
      </div>
    );
  }
}