Show component based on an event within child component in Blazor

Question

I've trying to render child components based on a click event.

At a basic level I'm trying this

Parent:

@if (!TheBoolean)
{
    <Child1 OnClickCallback="ClickHandler" />
}

@if (TheBoolean)
{
    <Child2 OnClickCallback="ClickHandler" />
}

@code {
    private bool TheBoolean { get; set; }

    private void ClickHandler(bool theBoolean)
    {
        TheBoolean = theBoolean;
    }
}

The code from Child 1 and 2, the logic would be almost the same, one would pass true, the other false.

<button type="button" @onclick="@(() => OnClickCallback.InvokeAsync(false))">Finish</button>

@code {
    [Parameter]
    public EventCallback<bool> OnClickCallback { get; set; }
}

I'm sure either I'm missing something or doing something wrong (or perhaps both). I'm trying to get the parent component to render a certain child component based on the callback value of a child component. Hopefully that's clear. Thanks.

Answer 1

TheBoolean property your updating is missing.

@if (!TheBoolean)
{
    <Child1 OnClickCallback="ClickHandler" />
}

@if (TheBoolean)
{
    <Child2 OnClickCallback="ClickHandler" />
}

@code {
    private bool TheBoolean { get; set; }
     
    private void ClickHandler(bool theBoolean)
    {
        TheBoolean = theBoolean;
    }
}

Here is a working Fiddle

As this example is boolean then this would be better :

@if (TheBoolean)
{
    <Child2 OnClickCallback="ClickHandler" />
}
else
{
    <Child1 OnClickCallback="ClickHandler" />
}