CODEWITHSUNDEEP
javascripttypescriptjsxstenciljstsx
Dennis
Dennis

Reputation: 318

Nested this in Stencil.js components

I am wondering if there is an easier way to use a nested "this" in a Stencil.js component.

At the moment I am doing this:

render() {
    let thisNested = this;

    return <Host>
        {this.images ?

          this.imagesArray.map(function (el) {
            return <img
              // @ts-ignore
              src={thisNested.imageSize ? thisNested.imageSize : el.url}/>
          }) : <slot/>}
      </div>
    </Host>;
  }

But I am always repeating myself writing a nested this variable as seen above.

Is there a more elegant way to do what I need?

Upvotes: 1

Views: 534

Answers (1)

Alex
Alex

Reputation: 1839

Use arrow function:

render() {
    return <Host>
        {this.images ?

          this.imagesArray.map((el) => (<img
              // @ts-ignore
              src={this.imageSize || el.url}/>
          )) : <slot/>}
      </div>
    </Host>;
  }

Upvotes: 1

Related Questions