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.


Comments

Post a Comment

Popular posts from this blog

Django REST Framework perform_create: You cannot call `.save()` after accessing `serializer.data` -

-
i have following viewset: class artistprofileviewset(viewsets.modelviewset): queryset = artistprofile.objects.all() serializer_class = artistprofileserializer def perform_create(self, serializer): if serializer.is_valid(): serializer.save() with following serializers: class simpleartisttrackserializer(serializers.hyperlinkedmodelserializer): class meta: model = artisttrack fields = (...my fields...) class artistprofileserializer(serializers.hyperlinkedmodelserializer): owners = userserializer(many=true, required=false) tracks = simpleartisttrackserializer(many=true, required=false) class meta: model = artistprofile fields = (...my fields...) i getting following error: assertionerror: cannot call `.save()` after accessing `serializer.data`.if need access data before committing database inspect 'serializer.validated_data' instead. i don't see editing serializer.data object. th...
Read more

Why does Go error when trying to marshal this JSON? -

-
i'm trying rather simple example of trying decode json file structs using golang. however, when attempting error that json: cannot unmarshal object go value of type []main.track which don't understand. here's code in question, , json can found here . package main import ( "encoding/json" "fmt" "net/http" "os" ) // tracks group of track types type tracks struct { tracks []track } // track represents singular track type track struct { name string url string artist artist } // artist represents single artist type artist struct { name string mbid string url string } func main() { url := "http://ws.audioscrobbler.com/2.0/?method=geo.gettoptracks&api_key=c1572082105bd40d247836b5c1819623&format=json&country=netherlands" response, err := http.get(url) if err != nil { fmt.printf("%s\n", err) os.exit(1) } de...
Read more