How to manage state in a tree component in reactjs

Question

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 ar

Answer 1

I wanted to try out the tree structure with React and came up with a simple component that hides subtrees when you click on

. 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 

      });
    }

    var style = {};
    if (!this.state.visible) {
      style.display = "none";
    }

    return (
      

        

          {this.props.node.title}
        
        

          {childNodes}
        
      
    );
  },
  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(
  ,
  document.getElementById("tree")
);