Cannot read properties of undefined (reading 'id')

[expertup]

I use code from example, and have problem. I don't know how resolve them.

Screen:

My code:

import React from "react"
import ReactDom from "react-dom"

import { StickyTree } from 'react-virtualized-sticky-tree';

import { Button } from '@material-ui/core';

const tree = {
  root: { name: 'Root', children: ['child1', 'child2', 'child3'], depth: 0 },
  child1: { name: 'Child 1', children: ['child4'], depth: 1 },
  child2: { name: 'Child 2', depth: 2 },
  child3: { name: 'Child 3', depth: 2 },
  child4: { name: 'Child 4', depth: 3 },
};

const getChildren = (id) => {
  if (tree[id].children) {
    return tree[id].children.map(id => ({ id, height: 30, isSticky: true }));
  }
};

const rowRenderer = ({ id, style }) => {
  const node = tree[id];
  return <div style={style}>{node.name}</div>
};

function App() {
    return (<>
      <Button color="primary">Hello World</Button>
      <StickyTree
        root={{ id: 'root', height: 30 }}
        width={400}
        height={30}
        getChildren={getChildren}
        rowRenderer={rowRenderer}
        renderRoot={true}
        overscanRowCount={20}
      />
    </>)
}

ReactDom.render(<App />, document.getElementById('app'))

package.json:

{
  "name": "mapa",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production",
    "start": "sh server.sh && webpack-dev-server --mode development --hot",
    "service": "webpack-dev-server --mode development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.17.2",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.6.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.68.0",
    "webpack-cli": "^4.9.2"
  },
  "dependencies": {
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@material-ui/core": "^4.12.3",
    "@mui/material": "^5.4.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-virtualized-sticky-tree": "^3.0.0-beta13",
    "webpack-dev-server": "^4.7.4"
  }
}

[laurelgr]

Example code is not up to date because github seems to be version 2.x while npm package is 3.x.
From what I figured out the data passed on and returned is now directly tree nodes instead of tree ids.

Changes relevant to example, in order:

1. getChildren function
   i. getChildren function now receives a tree node instead of node's id
   ii. getChildren output format should include a node reference to the relevant tree node

const getChildren = (node) => {
  if (node.children) {
    return node.children.map(id => ({ id, node: tree[id], height: 30, isSticky: true }));
  }
};

2. rowRenderer function/component now receives a tree node instead of id

const rowRenderer = ({ node, style }) => {
  return <div style={style}>{node.name}</div>
};

3. StickyTree's prop root should include node instead of id (also, if you want it to stick, add isSticky: true and other values same as getChildren's formatting)

<StickyTree
  root={{ node: dataTree.root, height: 30 }}
  width={400}
  height={30}
  getChildren={getChildren}
  rowRenderer={rowRenderer}
  renderRoot={true}
  overscanRowCount={20}
/>

[laurelgr]

You can also specify the master branch version instead, in your package.json : `"react-virtualized-sticky-tree": "2.1.30". This one should be compatible with the original Example.

PR about the breaking changes of version 3: #30
The 3.x version seems to match branch typescript, but be warned that the README is not updated

[whf1028]

i want to install the "react-virtualized-sticky-tree": "2.1.30"， but get the error:
PS D:\MyWorkingCode\foxglove-extension-FastRawMessage\fast-raw-message> npm install react-virtualized-sticky-tree@2.1.30 --save
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: fast-raw-message@0.0.1
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR! react@"^18.2.0" from the root project

is this mean : no 2.1.30 version? now, just "react-virtualized-sticky-tree": "^3.0.0-beta13" ?

[whf1028]

@laurelgr >

u should modify the data:
data->dataTree, and add id:'Root' in the dataTree.root.
const dataTree = {
root: { id: 'Root', name: 'Root', children: ['child1', 'child2', 'child3'], depth: 0 },
child1: { name: 'Child 1', children: ['child4'], depth: 1 },
child2: { name: 'Child 2', depth: 2 },
child3: { name: 'Child 3', depth: 2 },
child4: { name: 'Child 4', depth: 3 },
};