setState is not working in property provider component

Developers Modeler
1

I want to add a property provider. I could add it but useState or setState is not working.
I followed bpmn-js-examples/README.md at master · bpmn-io/bpmn-js-examples · GitHub and it worked but setState doesn’t work.
Here’s is my entry component code:

import { html, Component } from 'htm/preact';

export default function f(element) {
  return [
    {
      id: 'spell',
      element,
      component: SpellContainer,
      isEdited: isTextFieldEntryEdited
    }
  ];
}

class SpellContainer extends Component {
  addTodo() {
    this.setState({ });
  }
  render() {
    return html`
          <div class="app">
            <button onClick=${() => this.addTodo()}>Add Todo</button>
          </div>
        `;
  }
}

After clicking the button I get this error:
image

and it doesn’t rerender the component.
I also can’t use useState from preact/hooks. It throws Cannot read property '__H' of undefined.
How can I have states in components?

Versions:
bpmn-js: 13.0.8
bpmn-js-properties-panel: 1.25.0
htm: 3.1.1

Thank you

2

You’ll have to import Preact from @bpmn-io/properties-panel/preact.

Working example: Import Preact from Properties Panel Example - CodeSandbox