Multiple bjs-container on rerender in React

Developers Modeler
1

Capture2222
I’m using BPMN-js with React and referencing quizzical-lake-szfyo - CodeSandbox sandbox.
I have a child component that is a modal that changes making the parent rerender and each time importing the bpmn-diagram again.
If I’m using BPMN promise-based approach for importing then I end up with a blank page with just 1 import ( my goal is 1 import with a diagram in it ).

I’m also getting undefined properties in parent Node when I’m trying to updateProperties using commandstack execute in React

        const businessObject = getBusinessObject(currentElementEvent.element);
        businessObject.name = e.selectedOptions[0].text;
        var context = {
          element: currentElementEvent.element,
          properties: {
            name: selectedItem,
          },
        };
        commandStack.execute('element.updateProperties', context);
2

Please share a running / prototypical example that clearly shows what you’re trying to achieve, what is working and what is not.

Use our existing starter projects to quickly hack it or share your existing, partial solution on GitHub or via a CodeSandbox. Provide the necessary pointers that allow us to quickly understand where you got stuck.

This way we may be able to help you in a constructive manner.

Thanks :heart:

3

Facing same issue, in Reactjs, if it re-renders bpmnjs is creating another instance of modeler and append it inside of the container

4

To resolve the issue I had to implement react memoization techniques to reduce rerenders with wrapping function inside useCallback hook and wrapping child components in memo hoc.