title: How to pass an optional RenderFragment from a parent component to a child component in Blazor?
body: <p><strong>Context:</strong>
  We have an Blazor application with the following 3 files:</p>
  <ul>
  <li>ChildComponent.razor</li>
  <li>ParentComponent.razor</li>
  <li>Test.razor (this is the consumer, which uses the parent component)</li>
  </ul>
  <p><strong>ChildComponent.razor</strong></p>
  <pre><code>&lt;div&gt;
      @if(Body != null)
      {
          @Body
      }
  
      @if(Footer != null)
      {
          &lt;div class=&quot;footer&quot;&gt;
              @Footer
          &lt;/div&gt;
      }
  &lt;/div&gt;
  
  @code
  {
      [Parameter]
      public RenderFragment Body { get; set; }
      
      [Parameter]
      public RenderFragment Footer { get; set; }
  }
  </code></pre>
  <p><strong>ParentComponent.razor</strong></p>
  <p>The ParentComponent uses the ChildComponent. We want to pass the <code>ParentFooter</code> to the Childcomponent´s <code>Footer</code>:</p>
  <pre><code>&lt;ChildComponent Footer=&quot;ParentFooter&quot;&gt;
      &lt;Body&gt;
          &lt;p&gt;@Text&lt;/p&gt;
      &lt;/Body&gt;
  &lt;/ChildComponent&gt;
  
  @code
  {
      [Parameter]
      public string Text { get; set; }
  
      [Parameter]
      public RenderFragment ParentFooter { get; set; }
  }
  </code></pre>
  <p>The consuming file is <strong>Test.razor</strong> and looks like this:</p>
  <pre><code>&lt;ParentComponent Text=&quot;Hello World&quot;&gt;&lt;/ParentComponent&gt;
  </code></pre>
  <p>We do not use a <code>&lt;ParentFooter&gt;&lt;/ParentFooter&gt;</code> here, because the footer is optional.</p>
  <p><strong>Problem:</strong></p>
  <p>We get an exception in the browser´s console:</p>
  <blockquote>
  <p>Unhandled exception rendering component: Delegate to an instance
  method cannot have null 'this' (Parameter 'this')</p>
  </blockquote>
  <p><strong>Possible Solution:</strong></p>
  <p>In the file <strong>ParentComponent.razor</strong>, we pass the Footer by an reference and make an <code>null</code>-check:</p>
  <pre><code>&lt;ChildComponent Footer=&quot;ParentFooter&quot; @ref=&quot;m_ChildComponentRef&quot;&gt;
      &lt;Body&gt;
          &lt;p&gt;@Text&lt;/p&gt;
      &lt;/Body&gt;
  &lt;/ChildComponent&gt;
  
  @code
  {
      [Parameter]
      public string Text { get; set; }
  
      [Parameter]
      public RenderFragment ParentFooter { get; set; }
      
      private ChildComponent m_ChildComponentRef { get; set; }
      
      protected override void OnParametersSet()
      {
          base.OnParametersSet();
  
          if (ParentFooter != null)
          {
              m_ChildComponentRef.Footer = ParentFooter;
          }
      }   
  }
  </code></pre>
  <p>But this is is a bad way, because we get an warning:</p>
  <blockquote>
  <p>BL0005:Component parameter should not be set outside of its component.</p>
  </blockquote>
  <p><strong>Question:</strong> How can we pass an optional RenderFragment to an child component?</p>