Blazor Component not updating UI when method is invoked by other component

Question

I have 3 components. When I want is to call the New() method of component C from component B. That works with following code (I get the Console.Writeline). But the UI is not updating. I have tried to set StateHaseChanged() in the New() method, but that gave me following errors. Many Thanks!

Error

WASM: System.InvalidOperationException: The render handle is not yet assigned.

ComponentA (SideBar Item)

<NavLink href="@href">
    <div @onclick="OnClick.InvokeAsync">@Text</div>
</NavLink>


@code {
    [Parameter] public string Text { get; set; }
    [Parameter] public EventCallback OnClick { get; set; }
}

ComponentB (SideBar)

<ComponentA Text="Something" Onclick="@(() => componentC.New())" />


@code {
    ComponentC componentC = new ComponentC();
}

ComponentC (Page)

@code {
    public void New()
    {
        //Dostuff..
        Console.WriteLine("Testing");
        //StateHasChanged();

    }
}

Answer 1

Try to use ComponentC in ComponentB as follows:

<ComponentA Text="Something" Onclick="@(() => componentC.New())" />
<ComponentC @ref="componentC" />

@code {
    private ComponentC componentC;
}

The ComponentBase class implements the IComponent.Attach(RenderHandle) method, which is not being called when you simply new-up the component in the code. However, when you do this in the markup, things are wired up correctly.

Answer 2

change your code into this:

<NavLink href="@href">
    <div @onclick="Navigate">@Text</div>
</NavLink>


@code {
    [Parameter] public string Text { get; set; }
    [Parameter] public EventCallback OnClick { get; set; }
    private void Navigate(){
     OnClick.InvokeAsync();
     }
}