tree does not render nodes

hello, im using the basic example on my Nextjs project only thing i added is NoSsr component to prevent server side rendering (otherwise it fails)

import React from "react";
import Typography from "@material-ui/core/Typography";
import NoSsr from '@material-ui/core/NoSsr';
import SortableTree from 'react-sortable-tree';

export default class MapComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      treeData: [{ id: '1', title: 'Chicken', children: [{ id: '1.1', title: 'Egg' }] }],
    };
  }

  render() {
    return (
      <div style={{ height: 400 }}>
        <Typography variant="caption">
          <NoSsr>
            <SortableTree
              treeData={this.state.treeData}
              onChange={treeData => this.setState({ treeData })}
              getNodeKey={({ node }) => node.id} />
          </NoSsr>
        </Typography>
      </div>
    );
  }
}

in browser, i can see that it renders:

• DragDropContext — ReactSortableTree ---- Scrolling ----- List ------ Grid

it pass the treeDada props all the way down but the tree nodes doesn’t getting rendered any ideas?

[jonthomp]

I’m seeing this on a new project too, setting isVirtualized={false} works as a temporary solution

[noushad-pp]

I faced the same issue and as @jonthomp mentioned, setting isVirtualized={false} fixes the issue. Also setting an explicit height to the container does fixes the issue too.

I am guessing its because react-virtualised or the whichever library used under the hood for virtual scrolling needs a container with height value rather than auto to work properly…