React Tree Component

React Tree Component

by Oleh Kotsubko

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>
<div id='container'></div>

Babel + JSX

var treeObj = [
	{
  	id: 1,
  	name: 'Bob',
  	children: [
      {
        id: 2,
        name: 'Mary',
        children: [
        	{id: 4, name: 'Suzy'}
      	]
    	},
    	{
      	id: 3,
      	name: 'Phil',
      	children: [
        	{id: 5, name: 'Jon'},
        	{id: 6, name: 'Paul'}
      	]
    	}
  	]
	}
 ];

var TreeView = React.createClass({
  getInitialState: function() {
    return {
      people: treeObj
    };
  },
                                  
  render: function() {
    var people = this.state.people;
    var nodes = people.map((i) => <TreeNode node={i} children={i.children} nodeRadius={90} />)

    return (
      <ul>{nodes}</ul>
    );
  }
});

var TreeNode = React.createClass({
  render: function() {
  	var nodes;
    if (this.props.children) {
    	nodes = this.props.children.map((i) => <TreeNode node={i} children={i.children} />);
    }          
    return (
    <div>
      <li>{this.props.node.name}</li>
      <ul>{nodes}</ul>  
    </div>	
    );
  }
});

ReactDOM.render(<TreeView />, document.getElementById('container'));