javascript - React - Tree Component -

i trying make component in react recursively display names in data tree. not familiar react , not sure can in code remove error in console.

the error uncaught syntaxerror: embedded: adjacent jsx elements must wrapped in enclosing tag

here jsfiddle code: https://jsfiddle.net/go79b0dp/ here example code:

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} />)      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 (       <li>{this.props.node.name}</li>       <ul>{nodes}</ul>     );   } });  reactdom.render(<treeview />, document.getelementbyid('container')); 

your treenode component returns 2 sibling components: <li> , <ul>. basically, you're trying return 2 things render function, , can't that.

normally, recommended solution wrap them both in element. example:

return (<div>   <li>{this.props.node.name}</li>   <ul>{nodes}</ul> </div>); 

however, tree structure you're trying create, better put <ul> inside <li>. be:

return (<li>   {this.props.node.name}   <ul>{nodes}</ul> </li>); 

this how nested lists commonly done in html.