Recursive Component

[bronter]

How do I make a component that renders itself recursively?
For example (albeit not a very practical one), suppose I wanted to make a component that just makes a mountain of divs that is count levels deep:

<div>
  {% if count > 0 %}
    <ThisComponent count={{ count - 1 }} />
  {% else %}
    {{ count }}
  {% endif %}
</div>

Which if I updated it with count=3, would give something like this:

<div>
  <div>
    <div>
      0
    </div>
  <div>
<div>

I can't seem to figure out any way to reference a component inside itself, so how do I make a recursive component like this?

[antonmedv]

You can import self component.

[bronter]

Figured it out, I just didn't know multiple custom components could be defined per-file, so:

<Test>
  <div>
    {% if count > 0 %}
      <Test count={{ count - 1 }} />
    {% else %}
      {{ count }}
    {% endif %}
  </div>
</Test>

<Test count={{ 3 }} />

Seems to work