title: How can I render list items dynamically and recursively from a nested array?
body: <p>Given the output, I want to list <code>&lt;li&gt;</code> dynamically</p>
  <pre><code>results = [
    {
      name: 'a1',
      results: []
    },
    {
      name: 'a2',
      results: [
        {
          name: 'b1',
          results: []
        },
        {
          name: 'b2',
          results: [
            {
              name: 'c1',
            }
          ]
        }
      ]
    },
    {
      name: 'a3',
    }
  ]
  </code></pre>
  <p>This is expected output</p>
  <pre><code>&lt;li&gt;a1&lt;/li&gt;
  &lt;li&gt;a2&lt;/li&gt;
  &lt;li&gt;b1&lt;/li&gt;
  &lt;li&gt;b2&lt;/li&gt;
  &lt;li&gt;c1&lt;/li&gt;
  &lt;li&gt;a3&lt;/li&gt;
  </code></pre>
  <p>My pseudo-code but I think this is not even close... I think I need &quot;recursive&quot; solution to tackle this problem</p>
  <pre><code>input.map((r) =&gt; {
    if(r) {
      return renderResult(r);
    } &lt;&lt;&lt; This is not a recursive way...
    return renderResult(r.results.?);
  });
  
  </code></pre>
  <p>How do I list this dynamically and recursively?</p>