Q:

Add a Prop() String Value to Host Class

I am new to StencilJS and JSX.
In my StencilJS component I have four props:

disabled:boolean
hasIcon:boolean
iconOnly:boolean
buttonType:string

In my render() function I have:
<Host class={{
        'btn': true,
        'disabled': this.disabled,
        'has-icon': this.hasIcon,
        'icon-only': this.iconOnly
      }}>

I would like to include the string prop called buttonType to the class but can find no documentation on how to accomplish this.
Any ideas?

A:

You can wrap it in square brackets (a Computed property name):
<Host class={{
        'btn': true,
        'disabled': this.disabled,
        'has-icon': this.hasIcon,
        'icon-only': this.iconOnly,
        [this.buttonType]: true,
      }}>

You can also use a template literal, for example to add a prefix:
<Host class={{
        'btn': true,
        'disabled': this.disabled,
        'has-icon': this.hasIcon,
        'icon-only': this.iconOnly,
        [`type-${this.buttonType}`]: true,        
      }}>

Note that this is a standard JavaScript feature, not specific to Stencil or JSX.

