frontend-collective / frontend-collective/react-sortable-tree

getTreeFromFlatData doesn't work in render.

Open
#390 1 comment 0 reactions 0 assignees View on GitHub
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.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.