title: Render tree structure of unknown depth using Blazor
body: <p>I'm using the following recursive function to try and render out an html accordion.
  It uses reflection to gather all property names and values of a given object. The object is a data tree structure of unknown depth/children etc.</p>
  <pre><code>@* Accordoin HTML Template *@
  &lt;div class=&quot;accordion&quot;&gt;
    &lt;input type=&quot;checkbox&quot; id=&quot;accordion-1&quot; name=&quot;accordion-checkbox&quot; hidden&gt;
     &lt;label class=&quot;accordion-header&quot; for=&quot;accordion-1&quot;&gt;
      &lt;i class=&quot;icon icon-arrow-right mr-1&quot;&gt;&lt;/i&gt;
      Title
     &lt;/label&gt;
  &lt;div class=&quot;accordion-body&quot;&gt;
      &lt;!-- Accordions content --&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  @code { 
  public void BuildTree(object obj)
  {
      if (obj == null) return;
      Type objType = obj.GetType();
      PropertyInfo[] properties = objType.GetProperties();
      foreach (PropertyInfo property in properties)
      {
          object propValue = property.GetValue(obj, null);
          if (property.PropertyType.IsPrimitive || property.PropertyType == typeof(string))
          {
              //Build accordion body
          }
          else if (typeof(IEnumerable).IsAssignableFrom(property.PropertyType))
          {
              //Build accordion header
              IEnumerable enumerable = (IEnumerable)propValue;
              if (enumerable != null)
                  foreach (object child in enumerable)
                      BuildTree(child);
          }
          else
          {
              //Build accordion header
              BuildTree(propValue);
          }
      }
  }
  </code></pre>
  <p><strong>My question is how would I go about rendering the html in a recursive way?</strong></p>
  <p>I have tried using a RenderFragment as follows :</p>
  <pre><code>RenderFragment BuildTree(object obj)
  {
  if (obj == null) return @&lt;p&gt;test&lt;/p&gt;;
  Type objType = obj.GetType();
  PropertyInfo[] properties = objType.GetProperties();
  foreach (PropertyInfo property in properties)
  {
      object propValue = property.GetValue(obj, null);
      if (property.PropertyType.IsPrimitive || property.PropertyType == typeof(string))
      {
         return @&lt;p&gt;Some test markup&lt;/p&gt;
      }
      else if (typeof(IEnumerable).IsAssignableFrom(property.PropertyType))
      {
          IEnumerable enumerable = (IEnumerable)propValue;
          if (enumerable != null)
              foreach (object child in enumerable)
                  BuildTree(child);
      }
      else
      {
          BuildTree(propValue);
      }
  }
  return @&lt;p&gt;Done&lt;/p&gt;;
  }
  </code></pre>
  <p>It builds but gives an error on runtime :</p>
  <p><strong>Unhandled exception rendering component: Cannot bind to the target method because its signature is not compatible with that of the delegate type.</strong></p>
  <p>I know there must be an idiomatic way to do this in blazor but I can't wrap my head around how recursion would work with render fragments.</p>