stencil is not rerendeing component when @state() decorated property is changed

Question

I started with stencil today. Following code is all I have in my project. Docs say, if Component member decorated with @state() is changed, component will rerender.

Any changes to a @State() property will cause the components render function to be called again.

But even this simple thing is not working. Pls advice.

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

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {

  @State() name:string = 'john';

  changeName(){
    this.name = "Peter";
    console.log('inside changeName');
  }

  render() {
    return <div>
      <p>{this.name}</p>
      <button onClick={this.changeName}>click</button>
    </div>;
  }
}

When I click on the button inside changeName is logged but no changes to name is seen in view.

Answer 1

Try changing your onClick to an arrow function:

<button onClick={() => this.changeName()}>click</button>

This preserves the meaning of this to reference your class. See https://stenciljs.com/docs/templating-jsx/#handling-user-input for more details and examples.

Answer 2

@matthewsteele answer is right but you can also define your function like below to make it work.

private changeName = () => {
  this.name = "Peter";
  console.log('inside changeName');
}

Doing above the this reference will still preserves to the class.