React-sortable-tree: Unable to find node on an unmounted component.

[maifeeulasad]

Reporting a Bug?

import React from 'react';
import SortableTree from 'react-sortable-tree';
import 'react-sortable-tree/style.css';

class App extends React.Component{

    state = {
        treeData: [
            { title: 'Chicken', children: [{ title: 'Egg' }] },
            { title: 'Fish', children: [{ title: 'fingerline' }] },
        ],
    };


    render() {
        return(
            <div>
                <SortableTree
                    treeData={this.state.treeData}
                />
            </div>
        )
    }
}

export default App;

[GlennSmeulders]

It's an issue when you use the latest version of React. Try downgrading to '16.11.0' for example.

[maifeeulasad]

@GlennSmeulders I've tried that too. Here is my sandbox.io : https://codesandbox.io/s/react-tree-test-9p78y

I have even tried in my local machine too, it doesn't work.

Added onChnage(data) and even removed StrictMode for testing purpose.

[JustynaKK]

I had the same issue after updating to the react 17.
Downgrading react and react-dom to 16.14.0 solved it temporarely

[maifeeulasad]

@JustynaKK can I have tried both on __16.11__ and __16.14__, still the problem doesn't get resolved, you can check my sandbox . If anyone can help it will be really helpful to me a lot.

I have invited you on Hangout too, so we can discuss it.

[GlennSmeulders]

@maifeeulasad I've tried your example and noticed that you didn't specify the div height that you wrapped your sortable tree component in. If I set the div height your example works for me.

Example: https://codesandbox.io/s/react-tree-test-forked-zjw1w

[maifeeulasad]

@GlennSmeulders thanks a lot. One last question can I make this not editable and all items expanded based on some condition ?

[GlennSmeulders]

@maifeeulasad You can set 'canDrag' to false to prevent dragging. All TreeItem's have a property 'expanded', you can use your condition here.

[maifeeulasad]

@GlennSmeulders thanks a lot.

[OR13]

As noted https://github.com/frontend-collective/react-sortable-tree/issues/830#issuecomment-722396912

Downgrading to:

    "react": "16.14",
    "react-dom": "16.14",
    "react-scripts": "4.0.0",
    "react-sortable-tree": "^2.8.0",

Resolved this issue for me.

[ArashArzandeh]

Just set
onChange={(treeData) => setItems([...treeData])}
isVirtualized={false}