React.js call recursive function in render

Question

Trying to display a hierarquical tree view with React.js

My render method:

render: function(){
  var self= this;
  return(
    <div className="panel panel-flat content-group-lg">
      <div className='panel-body'>
        <div className="tree">
          <ul>
            <li>
              <a href="#">Categorias</a>                  
                { self.printTree(this.state.tree_array) }                        
            </li>  
          </ul>        
        </div>
      </div>
    </div>
  )
}

and my printTree method:

printTree: function(level){
  console.log(level);
  var self = this;
  var level_length = level.length;

  if(level_length >= 1){
    return(
      <ul>{
        level.map(function(category){
          return (
            <li key={category.fields.name}>
              <a href='#'>{category.fields.name}</a>
            </li>
            {self.printTree(category.sons_array)}
          )         
        })
      }</ul>
    )
  }
}

The printTree method receives an array that corresponds to a "level" of the tree. My goal is to 'print' each element of this level ( so I use the map to iterate over the array ) but also print any possible sublevels of the current element, so I tried to call the function recursively, passing the 'sons' of the current element as the new array parameter for the recursive call.

For some reason, calling:

{self.printTree(category.sons_array)}

gives me: Uncaught SyntaxError: http://127.0.0.1/gims-webapp/components/NavBar.js: Unexpected token (901:84)

I'm using JSX and can't figure out what JSX is complaining about..

EDIT:

My final structure should look like this:

<div class="tree">
    <ul>
        <li>
            <a href="#">Parent</a>
            <ul>
                <li>
                    <a href="#">Child</a>
                    <ul>
                        <li>
                            <a href="#">Grand Child</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">Child</a>
                    <ul>
                        <li><a href="#">Grand Child</a></li>
                        <li>
                            <a href="#">Grand Child</a>
                            <ul>
                                <li>
                                    <a href="#">Great Grand Child</a>
                                </li>
                                <li>
                                    <a href="#">Great Grand Child</a>
                                </li>
                                <li>
                                    <a href="#">Great Grand Child</a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#">Grand Child</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

@Cohars I posted the relevant parts. The error is not that intuitive, but anyway i'll edit it. — Pavarine
– Pavarine, Commented Mar 4, 2016 at 13:35
i was expecting something else after Unexpected token :) and well, it's frustrating to see incomplete errors — Cohars
– Cohars, Commented Mar 4, 2016 at 13:43

Alexandr Subbotin · Accepted Answer · 2016-03-04 13:46:09Z

2

If you paste your code to babel repl, you will see where is error in your example – it is inside level.map(...), because you should return only one react node in map method (but you have <li > + self.printTree there). You can put self.printTree inside this li:

level.map(function(category){
  return (
    <li key={category.fields.name}>
      <a href='#'>{category.fields.name}</a>
      {self.printTree(category.sons_array)}
    </li>
   );
 })

answered Mar 4, 2016 at 13:46

Alexandr Subbotin

1,7242 gold badges17 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alexandr Subbotin Over a year ago

@Pavarine but in your example you have exactly the same – li>a+ul, where ul is result of self.printTree

Pavarine Over a year ago

Your right!!! Don't mind about it...the structure is exact the same! I accepted @Cohars answer cause he posted some minutes before you, but i really thank you for the help Alexandr!!

Guilherme Samuel · Accepted Answer · 2021-01-21 23:41:42Z

1

JSX requires expects only one Root Node, so this code:

return (
    <li key={category.fields.name}>
        <a href="#">{category.fields.name}</a>
    </li>
    {self.printTree(category.sons_array)}
);

Should be changed to:

return (
    <li key={category.fields.name}>
        <a href="#">{category.fields.name}</a>
        {self.printTree(category.sons_array)}
    </li>
);

Or it's like returning:

<li>
 ...
</li>
<ul>
 ...
</ul>

Which are several root nodes.

edited Jan 21, 2021 at 23:41

Guilherme Samuel

5476 silver badges13 bronze badges

answered Mar 4, 2016 at 13:41

Cohars

4,0501 gold badge34 silver badges51 bronze badges

3 Comments

Pavarine Over a year ago

I think putting the recursive call inside the <li> would not satisfy my needs of the hierarchy structure. I edited my question with the desired structure. Can it be adapted?

Pavarine Over a year ago

Don't mind about it...your solution is correct..the structure can be build this way you told.. really apreciate your help...

Anil Kumar Pandey Over a year ago

Now if we want to show serial number in front of each row, how to calculate index value in increment manner inside recursive method?

Collectives™ on Stack Overflow

React.js call recursive function in render

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related