Question

137

How to manage state in a tree component in reactjs

rated 0 times [ 139] [ 2] / answers: 1 / hits: 16946 / 11 Years ago, tue, december 10, 2013, 12:00:00

I've been struggling this for a couple of days, trying to figure out the react way to do it.

Basically, I have a tree, a list of lists (of lists ...) that can be arbitrarily nested, and I want a component that will display this and also enable rearrangement.

Here's my data:

var data = [{

      id: 1

    }, {

      id: 2, children: [

        {

          id: 3, children: [{id: 6}]

        }, {

          id: 4

        }, {

          id: 5

        }]

    }]

My first pass was to just have a single tree component that builds the nested lists of DOM elements in its render function (look at the code here). That actually worked pretty well for small numbers of elements, but I want to be able to support hundreds of elements, and there was a very high re-render cost when an element was moved within the tree (~600ms when there were a few hundred elements).

So I think I'll have each node of the tree be it's own instance of this component. But here's my question (sorry for the long intro):

Should each node dynamically query for the list it's children's IDs from a central database and store that in state? Or should the top-most node load the whole tree and pass everything down through props?

I'm still trying to wrap my mind around how state & props should be handled & divvied up.

Thanks

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

beatriceisabelad

Add To Favorites

Follow

Total Points: 710

Total Questions: 107

Total Answers: 99

Location: Cayman Islands

Member since Sat, Sep 17, 2022

2 Years ago

answered 11 Years ago domeniccolti · Accepted Answer

I wanted to try out the tree structure with React and came up with a simple component that hides subtrees when you click on <h5>. Everything is a TreeNode. Is this similar to what you were thinking?

You can see it in action in this JSFiddle: http://jsfiddle.net/ssorallen/XX8mw/

TreeNode.jsx:

var TreeNode = React.createClass({

  getInitialState: function() {

    return {

      visible: true

    };

  },

  render: function() {

    var childNodes;

    if (this.props.node.childNodes != null) {

      childNodes = this.props.node.childNodes.map(function(node, index) {

        return <li key={index}><TreeNode node={node} /></li>

      });

    }



    var style = {};

    if (!this.state.visible) {

      style.display = none;

    }



    return (

      <div>

        <h5 onClick={this.toggle}>

          {this.props.node.title}

        </h5>

        <ul style={style}>

          {childNodes}

        </ul>

      </div>

    );

  },

  toggle: function() {

    this.setState({visible: !this.state.visible});

  }

});

bootstrap.jsx:

var tree = {

  title: howdy,

  childNodes: [

    {title: bobby},

    {title: suzie, childNodes: [

      {title: puppy, childNodes: [

        {title: dog house}

      ]},

      {title: cherry tree}

    ]}

  ]

};



React.render(

  <TreeNode node={tree} />,

  document.getElementById(tree)

);