Условный рендер JSX не обновляется в зависимости от изменения состояния

Question

Я создаю компонент JSX с помощью StencilJS, и мой компонент не выполняет повторный рендеринг в зависимости от изменения его состояния. Я не имею понятия почему:

import { Component, Prop, State } from '@stencil/core'

@Component({
  tag: "button-popover-group",
})

export class ButtonPopoverContainer{
  @State() showPopover:boolean = false;
  @Prop() popoverContent:JSX.Element;

  toggleShowPopover() {
    this.showPopover = !this.showPopover;
    console.log(this.showPopover);
  }

  render() {
    return (
      <div class="rba-something">
        <my-button onClick={this.toggleShowPopover}/>
  
        {this.showPopover ? 
          <my-popover>
            {this.popoverContent}
          </my-popover> : 
          null
        }
      </div>
      
    )
  }
}

Мой оператор журнала консоли подтверждает, что состояние изменяется, но по какой-то причине мое всплывающее окно никогда не отображается

Answer 1

Хорошо, ответ состоял в том, чтобы изменить функцию переключения на функцию жирной стрелки, так как привязка к 'this' терялась в JSX