10

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.

asdasd
  • 6,050
  • 3
  • 14
  • 32

2 Answers2

14

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.

matthewsteele
  • 1,797
  • 1
  • 15
  • 31
1

@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.

Sufiyan Ansari
  • 1,780
  • 20
  • 22