C#•5mo ago

Blazor reactive state

Hi, I’m pretty new to blazor and I made a component which I expect to reactively update state. It’s called PinInput and it looks like this:

<div class="max-w-sm p-6 bg-white border flex items-center flex-col border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
    <p id="helper-text-explanation" class="…">@Label</p>
    <div class="…">
        @for (var i = 0; i < Code.Length; i++)
        {
            <div>
                <label for="@($"code-{i + 1}")" class="sr-only">Code @(i + 1)</label>
                <input @bind="@Code[i]" type="text" maxlength="1" data-focus-input-init data-focus-input-prev="@($"code-{i}")" data-focus-input-next="@($"code-{i + 2}")" id="@($"code-{i + 1}")" class="…" required/>
            </div>
        }
    </div>
</div>

<script>
  …
</script>

@code
{
    [Parameter] public string Label { get; set; }

    [Parameter] public char?[] Code { get; set; }

    [Parameter] public EventCallback<char?[]> CodeChanged { get; set; }

    private async Task HandleCodeChanged()
    {
        await CodeChanged.InvokeAsync(Code);
    }
}

<div class="max-w-sm p-6 bg-white border flex items-center flex-col border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
    <p id="helper-text-explanation" class="…">@Label</p>
    <div class="…">
        @for (var i = 0; i < Code.Length; i++)
        {
            <div>
                <label for="@($"code-{i + 1}")" class="sr-only">Code @(i + 1)</label>
                <input @bind="@Code[i]" type="text" maxlength="1" data-focus-input-init data-focus-input-prev="@($"code-{i}")" data-focus-input-next="@($"code-{i + 2}")" id="@($"code-{i + 1}")" class="…" required/>
            </div>
        }
    </div>
</div>

<script>
  …
</script>

@code
{
    [Parameter] public string Label { get; set; }

    [Parameter] public char?[] Code { get; set; }

    [Parameter] public EventCallback<char?[]> CodeChanged { get; set; }

    private async Task HandleCodeChanged()
    {
        await CodeChanged.InvokeAsync(Code);
    }
}

I’m using this component the following way:

<div class="h-screen flex justify-center items-center flex-col">
    <h1 class="text-4xl font-extrabold dark:text-white mb-4">Kocka póker</h1>
    <PinInput Label="A játék kódja:" @bind-Code="@Code"/>
    <div class="mt-2">
        <button type="…">Belépés</button>
        <button type="…">Új játék</button>
    </div>
    @{ new string(Code.Where(c => c.HasValue).Select(c => c.Value).ToArray()); }
</div>

@code
{
    public char?[] Code { get; set; } = new char?[6];
}

<div class="h-screen flex justify-center items-center flex-col">
    <h1 class="text-4xl font-extrabold dark:text-white mb-4">Kocka póker</h1>
    <PinInput Label="A játék kódja:" @bind-Code="@Code"/>
    <div class="mt-2">
        <button type="…">Belépés</button>
        <button type="…">Új játék</button>
    </div>
    @{ new string(Code.Where(c => c.HasValue).Select(c => c.Value).ToArray()); }
</div>

@code
{
    public char?[] Code { get; set; } = new char?[6];
}

The problem is that I don’t see the state updating and I even get an index out of bounds error at an unspecified place in the component. Can anyone point me in the right direction where I went wrong? Thanks for the help in advance!

2 Replies

Salman•5mo ago

Call StateHasChanged() function after you modify the state or make any changes to the state of the component. And for the index out of bound, recheck your loops and make sure you are iterating over the correct length

Xeretis•5mo ago

Hmm, I see Thanks

Gaming

Programming

Blazor reactive state