title: Automatically refresh a component in Blazor
body: <p>I am working on a Blazor page for adding a new object.  The object "RepairOrder" has List of object "RepairSection".</p>
  
  <p>On the page there is an area that will loop through the List "RepairOrder"."RepairSections" and show the elements:</p>
  
  <pre><code>   &lt;div class="col-lg-10"&gt;
          @if (sections.Count &gt; 0)
          {
              foreach (var sec in sections)
              {
                  &lt;h3&gt;Section @sec.SectionNumber&lt;/h3&gt;
  
                  &lt;div class="row"&gt;
                      &lt;div class="col-lg-1"&gt;&lt;/div&gt;
                      &lt;div class="col-lg-5"&gt;
                          &lt;label for="Failure" class="control-label"&gt;Failure: &lt;/label&gt;
                          &lt;input for="Failure" class="form-control" bind="@sec.Failure" readonly /&gt;
                      &lt;/div&gt;
                      &lt;div class="col-lg-1"&gt;&lt;/div&gt;
  
                      &lt;div class="col-lg-1"&gt;
                          &lt;label&gt;&lt;input type="checkbox" checked="@IsCApprovedChecked(sec)" /&gt;   Warranty&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div class="col-lg-2"&gt;
                          &lt;label&gt;&lt;input type="checkbox" value="@IsWarrantyChecked(sec)" /&gt;   Repair Approved&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="row"&gt;
                      &lt;div class="col-lg-1"&gt;&lt;/div&gt;
                      &lt;div class="col-lg-10"&gt;
                          &lt;label for="AdminComments" class="control-label"&gt;Admin Comments: &lt;/label&gt;
                          &lt;input for="AdminComments" class="form-control" bind="@sec.AdminComments" readonly /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-lg-1"&gt;&lt;/div&gt;
                      &lt;div class="col-lg-10"&gt;
                          &lt;label for="TechComments" class="control-label"&gt;Tech Comments: &lt;/label&gt;
                          &lt;input for="TechComments" class="form-control" bind="@sec.TechComments" readonly /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              }
          }
      &lt;/div&gt;
  </code></pre>
  
  <p>After all the current sections in the list have been added to the page, there is a button to add a new section. When the button is clicked, the function changes a bool value to true to open a modal as a dialog.  The modal contains fields to input a new section elements.</p>
  
  <p>function called to open the modal:</p>
  
  <pre><code>protected void AddSectionCalled()
  {
      _newSection = new RepairSection();
      this.isAddNew = true;
  }
  </code></pre>
  
  <p>Modal Code:</p>
  
  <pre><code>&lt;div class="modal" tabindex="-1" style="display:block" role="dialog"&gt;
          &lt;div class="modal-dialog modal-dialog-scrollable modal-xl"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;h3 class="modal-title"&gt;New Repair Section&lt;/h3&gt;
                      &lt;button type="button" class="close" onclick="@CloseModal"&gt;&lt;span aria-hidden="true"&gt;X&lt;/span&gt;&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;form&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-lg-1"&gt;&lt;/div&gt;
                              &lt;div class="col-lg-2"&gt;
                                  &lt;label for="sectionLetter" class="control-label"&gt;Section: &lt;/label&gt;
                                  &lt;input for="sectionLetter" class="form-control" bind="@_newSection.SectionNumber" /&gt;
                              &lt;/div&gt;
                              &lt;div class="col-lg-1"&gt;&lt;/div&gt;
  
                              &lt;div class="col-lg-2"&gt;
                                  &lt;label&gt;&lt;input type="checkbox" bind="@_newSection.Warranty" /&gt;   Warranty&lt;/label&gt;
                              &lt;/div&gt;
                              &lt;div class="col-lg-2"&gt;
                                  &lt;label&gt;&lt;input type="checkbox" bind="@_newSection.CustomerApproved" /&gt;   Repair Approved&lt;/label&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-lg-1"&gt;&lt;/div&gt;
                              &lt;div class="col-lg-10"&gt;
                                  &lt;label for="_failure" class="control-label"&gt;Failure: &lt;/label&gt;
                                  &lt;input for="_failure" class="form-control" bind="@_newSection.Failure"/&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-lg-1"&gt;&lt;/div&gt;
                              &lt;div class="col-lg-10"&gt;
                                  &lt;label for="_adminComments" class="control-label"&gt;Admin Comments: &lt;/label&gt;
                                  &lt;input for="_adminComments" class="form-control" bind="@_newSection.AdminComments" /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-lg-1"&gt;&lt;/div&gt;
                              &lt;div class="col-lg-10"&gt;
                                  &lt;label for="_techComments" class="control-label"&gt;Tech Comments: &lt;/label&gt;
                                  &lt;input for="_techComments" class="form-control" bind="@_newSection.TechComments"/&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;br/&gt;
                          &lt;button class="btn btn-primary float-left" onclick="AddNewSection"&gt;Add New Section&lt;/button&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>When the "Add New Section" button is clicked, the "_newSection" object created from the information collected in the modal is added to the "sections" list that was originally looped through when the page was loaded.</p>
  
  <pre><code>   private void AddNewSection()
          {
              sections.Add(_newSection);
              this.StateHasChanged();            
              this.isAddNew = false;
  
          }
  </code></pre>
  
  <p>as you can see I added the "StateHasChanged()" after the new section is added to the sections list. However the page does not render to display the new section.</p>
  
  <p>I originally had created dummy data on the page "OnInitAsync()" event that loaded the sections list with data before it was displayed. This way I could make sure the page displayed what was in the list correctly.</p>
  
  <p>How can I make the page re-render the information in the list after user adds a new object to the list?</p>
  
  <p>----Edit-----</p>
  
  <p>Below is the code for the entire page.  I will try and minimize this on the weekend, however there really is not a lot here.</p>
  
  <pre><code> @page "/AddRepairOrder"
  @using ShopLiveWebVersion2._0.Models
  @using ShopLiveWebVersion2._0.DataAccess
  @using ShopLiveWebVersion2._0.Services
  @using ShopLiveWebVersion2._0.Data
  @inject IUriHelper UriHelper
  @inject RepairOrderContext context
  
  &lt;div class="row"&gt;
      &lt;div class="col-lg-1"&gt;&lt;/div&gt;
      &lt;div class="col-lg-10"&gt;&lt;h1&gt;Create New Repair Order&lt;/h1&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;br /&gt;&lt;br /&gt;
  &lt;form id="AddROForm"&gt;
      &lt;div class="form-group"&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="col-lg-1"&gt;&lt;/div&gt;
              &lt;div class="col-lg-2"&gt;
                  &lt;label for="ControlNumber" class="control-label"&gt;Repair Order #: &lt;/label&gt;
                  &lt;input for="ControlNumber" class="form-control" bind="@ro.ControlNumber" maxlength="15" required /&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-1"&gt;
                  &lt;label for="TagNumber" class="control-label"&gt;Tag #: &lt;/label&gt;
                  &lt;input for="TagNumber" class="form-control" bind="@ro.TagNumber" maxlength="8" /&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-3"&gt;
                  &lt;label for="VIN" class="control-label"&gt;VIN: &lt;/label&gt;
                  &lt;input for="VIN" class="form-control" bind="@ro.VIN" maxlength="18" /&gt;
                  @*&lt;small id="Chasis" class="form-text text-muted"&gt;@ro.GetChassisNumber()&lt;/small&gt; figure out how to get chassis from vin after box looses focus*@
              &lt;/div&gt;
              &lt;div class="col-lg-2"&gt;
                  &lt;label for="Make" class="control-label"&gt;Make: &lt;/label&gt;
                  &lt;input for="Make" class="form-control" bind="@ro.Make" maxlength="30" /&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-2"&gt;
                  &lt;label for="Madel" class="control-label"&gt;Model: &lt;/label&gt;
                  &lt;input for="Madel" class="form-control" bind="@ro.Madel" maxlength="30" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row AddRow"&gt;
              &lt;div class="col-lg-1"&gt;&lt;/div&gt;
              &lt;div class="col-lg-4"&gt;
                  &lt;label for="Customer" class="control-label"&gt;Customer: &lt;/label&gt;
                  &lt;input for="Custoemr" class="form-control" bind="@ro.Customer" maxlength="50" /&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-2"&gt;
                  &lt;label asp-for="Location" class="control-label"&gt;Vehicle Location: &lt;/label&gt;
                  &lt;select asp-for="Location" class="form-control" bind="@ro.Location"&gt;
                      &lt;option value=""&gt;-- Select a Location --&lt;/option&gt;
                      @foreach (var loc in Location)
                      {
                          &lt;option value="@loc"&gt;@loc&lt;/option&gt;
                      }
                  &lt;/select&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-2"&gt;
                  &lt;label asp-for="Assigned" class="control-label"&gt;Assigned: &lt;/label&gt;
                  &lt;select asp-for="Assigned" class="form-control" bind="@ro.Assigned"&gt;
                      &lt;option value=""&gt;-- Select an Employee --&lt;/option&gt;
                      @foreach (var emp in Employee)
                      {
                          &lt;option value="@emp"&gt;@emp&lt;/option&gt;
                      }
                  &lt;/select&gt;
              &lt;/div&gt;
              &lt;div class="col-lg-2"&gt;
                  &lt;label asp-for="Status" class="control-label"&gt;Status: &lt;/label&gt;
                  &lt;select asp-for="Status" class="form-control" bind="@ro.Status"&gt;
                      &lt;option value=""&gt;-- Select a Status --&lt;/option&gt;
                      @foreach (var st in Status)
                      {
                          &lt;option value="@st"&gt;@st&lt;/option&gt;
                      }
                  &lt;/select&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;br /&gt;
          &lt;div class="row"&gt;&lt;div class="col-lg-1"&gt;&lt;/div&gt;&lt;div class="col-lg-10"&gt;&lt;hr id="Double" /&gt;&lt;/div&gt;&lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-lg-1"&gt;&lt;/div&gt;
              &lt;div class="col-lg-10"&gt;
                  @if (sections.Count &gt; 0)
                  {
                      foreach (var sec in sections)
                      {
                          &lt;h3&gt;Section @sec.SectionNumber&lt;/h3&gt;
  
                          &lt;div class="row"&gt;
                              &lt;div class="col-lg-1"&gt;&lt;/div&gt;
                              &lt;div class="col-lg-5"&gt;
                                  &lt;label for="Failure" class="control-label"&gt;Failure: &lt;/label&gt;
                                  &lt;input for="Failure" class="form-control" bind="@sec.Failure" readonly /&gt;
                              &lt;/div&gt;
                              &lt;div class="col-lg-1"&gt;&lt;/div&gt;
  
                              &lt;div class="col-lg-1"&gt;
                                  &lt;label&gt;&lt;input type="checkbox" checked="@IsCApprovedChecked(sec)" /&gt;   Warranty&lt;/label&gt;
                              &lt;/div&gt;
                              &lt;div class="col-lg-2"&gt;
                                  &lt;label&gt;&lt;input type="checkbox" value="@IsWarrantyChecked(sec)" /&gt;   Repair Approved&lt;/label&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="row"&gt;
                              &lt;div class="col-lg-1"&gt;&lt;/div&gt;
                              &lt;div class="col-lg-10"&gt;
                                  &lt;label for="AdminComments" class="control-label"&gt;Admin Comments: &lt;/label&gt;
                                  &lt;input for="AdminComments" class="form-control" bind="@sec.AdminComments" readonly /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-lg-1"&gt;&lt;/div&gt;
                              &lt;div class="col-lg-10"&gt;
                                  &lt;label for="TechComments" class="control-label"&gt;Tech Comments: &lt;/label&gt;
                                  &lt;input for="TechComments" class="form-control" bind="@sec.TechComments" readonly /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      }
                  }
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;&lt;/div&gt;
      &lt;/div&gt;    @*Form-group*@
  &lt;/form&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-lg-1"&gt;&lt;/div&gt;
      &lt;div class="col-lg-9"&gt;
          &lt;br /&gt;&lt;br /&gt;
          &lt;button class="btn btn-primary float-right" onclick="@AddSectionCalled"&gt;Add New Section&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  @if (isAddNew == true)
  {
      &lt;div class="modal" tabindex="-1" style="display:block" role="dialog"&gt;
          &lt;div class="modal-dialog modal-dialog-scrollable modal-xl"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;h3 class="modal-title"&gt;New Repair Section&lt;/h3&gt;
                      &lt;button type="button" class="close" onclick="@CloseModal"&gt;&lt;span aria-hidden="true"&gt;X&lt;/span&gt;&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;form&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-lg-1"&gt;&lt;/div&gt;
                              &lt;div class="col-lg-2"&gt;
                                  &lt;label for="sectionLetter" class="control-label"&gt;Section: &lt;/label&gt;
                                  &lt;input for="sectionLetter" class="form-control" bind="@_newSection.SectionNumber" /&gt;
                              &lt;/div&gt;
                              &lt;div class="col-lg-1"&gt;&lt;/div&gt;
  
                              &lt;div class="col-lg-2"&gt;
                                  &lt;label&gt;&lt;input type="checkbox" bind="@_newSection.Warranty" /&gt;   Warranty&lt;/label&gt;
                              &lt;/div&gt;
                              &lt;div class="col-lg-2"&gt;
                                  &lt;label&gt;&lt;input type="checkbox" bind="@_newSection.CustomerApproved" /&gt;   Repair Approved&lt;/label&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-lg-1"&gt;&lt;/div&gt;
                              &lt;div class="col-lg-10"&gt;
                                  &lt;label for="_failure" class="control-label"&gt;Failure: &lt;/label&gt;
                                  &lt;input for="_failure" class="form-control" bind="@_newSection.Failure" /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-lg-1"&gt;&lt;/div&gt;
                              &lt;div class="col-lg-10"&gt;
                                  &lt;label for="_adminComments" class="control-label"&gt;Admin Comments: &lt;/label&gt;
                                  &lt;input for="_adminComments" class="form-control" bind="@_newSection.AdminComments" /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="col-lg-1"&gt;&lt;/div&gt;
                              &lt;div class="col-lg-10"&gt;
                                  &lt;label for="_techComments" class="control-label"&gt;Tech Comments: &lt;/label&gt;
                                  &lt;input for="_techComments" class="form-control" bind="@_newSection.TechComments" /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;br /&gt;
                          &lt;button class="btn btn-primary float-left" onclick="AddNewSection()"&gt;Add New Section&lt;/button&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  }
  
  @functions
  {
  
  
      private RepairOrder ro;
      private RepairOrder incomingRO;
      private RepairOrderDataAccess RoData;
      private string chassis;
      private List&lt;string&gt; Location;
      private List&lt;string&gt; Employee;
      private List&lt;string&gt; Status;
      private FileService fileService;
      private List&lt;RepairSection&gt; sections;
      private bool isAddNew;
  
      //for new repair section modal
      private RepairSection _newSection;
  
      protected override async Task OnInitAsync()
      {
          ro = new RepairOrder();
          Location = new List&lt;string&gt;();
          Employee = new List&lt;string&gt;();
          Status = new List&lt;string&gt;();
          sections = new List&lt;RepairSection&gt;();
          isAddNew = false;
          fileService = new FileService();
          RoData = new RepairOrderDataAccess(context);
          await LoadData();
  
      }
  
      private async Task LoadData()
      {
          Location = await Task.Run(() =&gt; fileService.ReadLocation());
          Employee = await Task.Run(() =&gt; fileService.ReadEmployees());
          Status = await Task.Run(() =&gt; fileService.ReadStatus());
  
      }
  
      public string IsCApprovedChecked(RepairSection sc)
      {
          if (sc.CustomerApproved == true)
          {
              return "checked";
          }
          else
          {
              return "";
          }
      }
  
      public string IsWarrantyChecked(RepairSection sc)
      {
          if (sc.Warranty == true)
          {
              return "checked";
          }
          else
          {
              return "";
          }
      }
  
      protected void AddSectionCalled()
      {
          _newSection = new RepairSection();
          this.isAddNew = true;
      }
  
      private void AddNewSection()
      {
          sections.Add(_newSection);
          this.StateHasChanged();            
          this.isAddNew = false;
  
      }
  
  
  
      private void CloseModal()
      {
          this.isAddNew = false;
      }
  </code></pre>