How to Close MudBlazor Chip

Question

I have created a simple program using the MudBlazor framework

Test.razor file

    <MudTextField @bind-Value="TextValue" Label="Standard" Variant="Variant.Text"></MudTextField>
    <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="Clicked" Class="mt-2">click</MudButton>
    <MudDivider Class="my-2"/>
    @foreach(var chip in chipText){
        <MudChip Variant="Variant.Text" Color="Color.Secondary" OnClose="Closed">@chip</MudChip>
    }
    
    @code{
    
        public string TextValue { get; set; }
        List<string> chipText=new List<string>();
    
        private void Clicked()
        {
            chipText.Add(TextValue);
            TextValue="";
            StateHasChanged();
        }
    
        void Closed(MudChip chip) {
           
           StateHasChanged();
        }
    
    
    }

when I enter a text in the text field and enter the click button I can show that text value on a chip. each chip has a close button. when I click this close button, it should be closed. everything is working properly except chip closing. how can I do this ??

Answer 1

You need to remove the corresponding chip from chipText. Just like adding an element on the list adds a MudChip, removing one from the list, removes a MudChip on the next render.

<MudChip Variant="Variant.Text" Color="Color.Secondary" OnClose="@(() => Closed(chip))">@chip</MudChip>

void Closed(string chipToRemove) {
    chipText.Remove(chipToRemove);
}

I guess OnClose will call StateHasChanged() automatically, so we should be able to remove it.