frontend-collective / frontend-collective/react-sortable-tree
getTreeFromFlatData doesn't work in render.
- Dominant language
- JavaScript
- Stars
- 5k
- Forks
- 914
- PR merge metrics
- No merged PRs in 30d
Description
Following the [advice](https://www.reddit.com/r/reactjs/comments/93mk1j/beginners_thread_easy_question_august_2018/e42qpf6) of a Reddit user, I tried to move `getTreeFromFlatData` into the render() method. I was advised that it's not a good idea to mutate this.state which is what happens when you drag nodes around and treeData is in state.
However now it only returns the first row of InitialData in `treeData`. Any idea why? If I console.log `flatData` it has the full expected list of rows. For some reason though, getTreeFromFlatData is only returning one row.
Thanks! Code below which is a modification on the "import" storybook code:
```
const someOnlineAdvice = {
treeData: getTreeFromFlatData({
flatData: initialData.map(node => ({ ...node, title: node.name })),
getKey: node => node.id, // resolve a node's key
getParentKey: node => node.parent, // resolve a node's parent's key
rootKey: null, // The value of the parent key when there is no parent (i.e., at root level)
}),
};
const flatData = getFlatDataFromTree({
treeData: someOnlineAdvice.treeData,
getNodeKey: ({ node }) => node.id, // This ensures your "id" properties are exported in the path
ignoreCollapsed: false, // Makes sure you traverse every node in the tree, not just the visible ones
}).map(({ node, path }) => ({
id: node.id,
name: node.name,
// The last entry in the path is this node's key
// The second to last entry (accessed here) is the parent node's key
parent: path.length > 1 ? path[path.length - 2] : null,
}));
return (
âtreeData for this tree was generated from flat data similar to DB rowsâ
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.