Don't set Blazor Component params outside their comp

Programming
, , ,
1

I am learning Blazor and have no experience with component-based programming. I have two components: a DateRangePicker and a RadzenCheckBox. The requirement is that when the checkbox is clicked, two calendars should be shown, and when it’s unchecked, only one calendar should be visible. I wrote the following code:

@code{
    DateRangePicker calendar;

    public void txtBoxChange(bool args) 
    {
        if (args == true) //shows one calendar when checked
            calendar.ShowOnlyOneCalendar = true;
        else //shows two calendars when unchecked
            calendar.ShowOnlyOneCalendar = false;
    }
}

However, I get a warning that “Component parameter ‘ShowOnlyOneCalendar’ should not be set outside of its component”. What is the best way to achieve this requirement without getting the warning?

2

You should create a parameter ShowOnlyOneCalendar in your DateRangePicker component and pass the value from the RadzenCheckBox component to this parameter. Here’s an example of how to do it:

In your DateRangePicker component:

<div>
    @if (ShowOnlyOneCalendar)
    {
        <input type="text" @bind="StartDate" />
    }
    else
    {
        <input type="text" @bind="StartDate" />
        <<input type="text" @bind="EndDate" />
    }
</div>

@code {
    [Parameter]
    public bool ShowOnlyOneCalendar { get; set; }

    [Parameter]
    public DateTime StartDate { get; set; }

    [Parameter]
    public DateTime EndDate { get; set; }
}

In your RadzenCheckBox component:

<RadzenCheckBox @bind-Value="ShowOnlyOneCalendar" Change="@txtBoxChange" />

@code {
    [Parameter]
    public bool ShowOnlyOneCalendar { get; set; }

    [Parameter]
    public EventCallback<bool> ShowOnlyOneCalendarChanged { get; set; }

    private async Task txtBoxChange(bool args)
    {
        await ShowOnlyOneCalendarChanged.InvokeAsync(args);
    }
}

This way, the ShowOnlyOneCalendar parameter will be set only within the DateRangePicker component, and you won’t get the warning anymore.