20.06-reactive.md

layout	title	label	permalink	nav_order	parent
page	Reactive Web-Components to Update HTML	Reactive properties	/usage-web-components/reactive/	6	Usage

Reactive Properties

The state is where the reactiveness takes place.

declare a state object in the init() function with default values:

init() {
  this.state = {
    user: { firstname: 'John', lastname: 'Doe' },
    status: "Happy 😄"
  }
}

Displaying a state value is as simple as writing ${state.theValue} in your HTML.

When you need your component to react, call the this.render() method with your updated state:

itemSelected(event) {
  this.render({ selected: "apple", isAdmin: true })
}

This will refresh your component where needed.

When state is just mutated, the changed(changedProps) is called. This changed() method is called before (re-)rendering.