Trying to add span element to a string by replacing the commas. But getting above error code in my jquery code.

for example What I am trying to accomplish:

this.prop.city == "los angeles, new york, boston"

then that string turns into:

<span>los angeles</span> <span>new york</span> <span>boston</span>

This is my code section it is based on stencil.js

The line causing the error is

        $('.tag').html($('.tag').html().split(', ').map(function(el) {return '<span>' + el + '</span>'}));

  @Component({
    tag: 'stencil-component-text',
})
export class stencilComponentText {
    @Prop() prop: any;

      componentDidLoad() {

        $('.tag').html($('.tag').html().split(', ').map(function(el) {return '<span>' + el + '</span>'}));
    }

       render() {
        if (this.prop.countryCode && this.prop.city) {
            if(this.prop.city.includes(',')){

                return  <span class="testing">{this.prop.countryCode} - <span class="tag">{this.prop.city}</span>, {this.prop.state}</span>
            } 
     }

Full error is as follows:

Argument of type 'string[]' is not assignable to parameter of type
          'string | Element | Text | Comment | DocumentFragment | ((this:
          HTMLElement, index: number, oldhtml: string) => string | Element |
          Text | Comment | DocumentFragment)'. Type 'string[]' is not
          assignable to type 'string'.