@inject CoursePlanner planner
@inject CanvasService canvas

@code {

  [Required]
  [StringLength(50, ErrorMessage = "Name too long (50 character limit).")]
  private string Name { get; set; } = "";

  [Parameter]
  public EventCallback OnSubmit { get; set; }

  private async Task submitHandler()
  {
    if(planner.LocalCourse != null && Name != "")
    {
      var newModule = new LocalModule
      {
        Name=Name,
        Id=Guid.NewGuid().ToString()
      };


      planner.LocalCourse = planner.LocalCourse with 
      {
        Modules = planner.LocalCourse.Modules.Append(newModule)
      };
    }
    Name = "";
    await OnSubmit.InvokeAsync();
  }
}

<h1>New Module</h1>

<form @onsubmit:preventDefault="true" @onsubmit="submitHandler">
  <label for="moduleName">Name:</label>
  <input id="moduleName" class="form-control" @bind="Name" />
  <button class="btn btn-primary">Save</button>
</form>