# How do I use a component recursively?

**URL:** <https://forums.bitovi.com/t/how-do-i-use-a-component-recursively/240>\
**Category:** CanJS\
**Created:** [April 22, 2016, 6:13pm UTC](https://forums.bitovi.com/t/how-do-i-use-a-component-recursively/240 "2016-04-22T18:13:31Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![justthismorning](https://avatars.discourse-cdn.com/v4/letter/j/c37758/32.png) [@justthismorning](https://forums.bitovi.com/u/justthismorning)\
**Post date:** [April 22, 2016, 6:13pm UTC](https://forums.bitovi.com/t/how-do-i-use-a-component-recursively/240/1 "2016-04-22T18:13:31Z")

</div>

I am trying to set up a recursive component but it keeps crashing my server without outputting an error. How would I do it correctly?

Say I have this data structure

```auto
var halliwells = [
  {
    name: "Penny",
    children: [
      {
        name: "Patty",
        children: [
          {name: "Prue"},
          {name: "Piper"},
          {name: "Phoebe"},
          {name: "Paige"}
        ]
      }
    ]
  }
]

```

I want the output to look like this

```auto
<ul>
  <li>
    Penny
    <ul>
      <li>
        Patty
        <ul>
          <li>Prue</li>
          <li>Piper</li>
          <li>Phoebe</li>
          <li>Paige</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

```

Right now I am calling a template to build the list like this

```auto
<can-import from="lineage.component">
  <direct-lineage {lineage}="halliwells" />
</can-import>

```

And the component builds the list like this

```auto
<ul>
    {{#lineage}}
      <li>{{name}}</li>
      <can-import from="lineage.component">
        <direct-lineage {lineage}="children" />
      </can-import>
      <!-- how do I recursively call the direct-lineage component from here? -->
    {{/lineage}}
  </ul>

```

---

<div class="post-metadata">

**Author:** ![DylanRoss](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/dylanross/32/71_2.png) [@DylanRoss](https://forums.bitovi.com/u/DylanRoss)\
**Post date:** [April 22, 2016, 6:25pm UTC](https://forums.bitovi.com/t/how-do-i-use-a-component-recursively/240/2 "2016-04-22T18:25:53Z")

</div>

That should work as long as you terminate properly.

Here is a working example:  
http://jsbin.com/xewokicoxu/embed?html,js,output

Not sure about importing the component in its own template… that might cause a problem. Does it work without doing that?

---

<div class="post-metadata">

**Author:** ![justthismorning](https://avatars.discourse-cdn.com/v4/letter/j/c37758/32.png) [@justthismorning](https://forums.bitovi.com/u/justthismorning)\
**Post date:** [April 22, 2016, 7:35pm UTC](https://forums.bitovi.com/t/how-do-i-use-a-component-recursively/240/3 "2016-04-22T19:35:46Z")

</div>

I checked my closures and they’re fine.

When I remove the can-import line, it stops crashing but I get `RangeError: Maximum call stack size exceeded`

I’m trying to use it in a self-contained component.

```auto
<can-component tag="direct-lineage">
  <style type="less">
    display: block;

  </style>

  <template>
      <ul>
        {{#lineage}}
          <li>
              {{name}}
              {{#if children}}
                    <direct-lineage {lineage}="children"/>
              {{/if}}
          </li>
        {{/lineage}}
      </ul>
  </template>
</can-component>

```

---

<div class="post-metadata">

**Author:** ![DylanRoss](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/dylanross/32/71_2.png) [@DylanRoss](https://forums.bitovi.com/u/DylanRoss)\
**Post date:** [April 22, 2016, 8:03pm UTC](https://forums.bitovi.com/t/how-do-i-use-a-component-recursively/240/4 "2016-04-22T20:03:30Z")

</div>

I think what is happening here is that when `children` eventually becomes `undefined`, the parent scope is inspected instead, so the recursion never stops.

One solution is to define your component as `leakScope:false` to stop the scope chain. I think with the self-contained component, that just becomes an attribute like `leakScope="false"`.

---

<div class="post-metadata">

**Author:** ![justthismorning](https://avatars.discourse-cdn.com/v4/letter/j/c37758/32.png) [@justthismorning](https://forums.bitovi.com/u/justthismorning)\
**Post date:** [April 22, 2016, 8:07pm UTC](https://forums.bitovi.com/t/how-do-i-use-a-component-recursively/240/5 "2016-04-22T20:07:35Z")

</div>

Thank you. I will look into leakScope. I solved it this time by using `./`