How to update nodes after onChange

[amitaibu]

I've created a demo repo using IHP (Haskell), so thanks for this handy package.

Over here I'm updating the tree on the backend, and I return a JSON with new nodes. I'm rendering the nodes differently based on their position.

How can I update the tree based on the new nodes we fetched?

I tried to do this.nodes = ... from within the onChange, but I didn't see a change.

[amitaibu]

As a workaround, I'm cleaning the tree, and re-render it from the onChange. Wondering if there's a better way.

[marcantondahmen]

Hi! Yeah, I think re-rendering the tree is the most straight forward way to do it. You can provide a stateId in order to persist the folding state across re-renders and also page refreshes. That way the user shouldn't notice the rendering.

[amitaibu]

You can provide a stateId in order to persist the folding state across re-renders and also page refreshes.

Is there an example to that?

[marcantondahmen]

Sure, you can find it in all examples on the demo page. The stateId can be any string you want:

import { nodes } from './nodes';
import SortableTree from 'sortable-tree';

new SortableTree({
  nodes,
  element: document.getElementById('tree'),
  stateId: 'tree-state',
});