I have implemented a javascript library called Flickity and it works fine. But when I loop through a list of objects called from an api endpoint I get some errors.

The code I'm using is this:

<div class="main-carousel">

@foreach (var item in campaigns)
{
    <div class="carousel-cell"></div>
}

@code {
protected async override Task OnAfterRenderAsync(bool firstrender)
{
    if (firstrender)
    {
        await js.InvokeAsync<object>("initF");
    }
}

public List<StoreCampaignModel> campaigns { get; set; }

protected async override Task OnInitializedAsync()
{
    campaigns = await _repoCampaign.Get(EndPoints.StoreCampaignEndPoint + $"Get?orgId=11", Config.WebboxToken);
}

}

That renders the flickity object correctly but gives this error message in the console:

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: Object reference not set to an instance of an object. System.NullReferenceException: Object reference not set to an instance of an object. at K10Forlag.UI.Shared.Flickity.BuildRenderTree(RenderTreeBuilder __builder) in C:\Users\peter\OneDrive\Websiter\Kanal10Media.UI\K10Forlag.UI\Shared\Flickity.razor:line 11 at Microsoft.AspNetCore.Components.ComponentBase.<.ctor>b__6_0(RenderTreeBuilder builder) at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment, Exception& renderFragmentException)

So that means that campaigns is not initiiated so I'm thinking that I can either check if it's null or just initiate it as an empty list. But when I try that the javascript is not loaded correctly and the flickity object is not correctly shown.

I've included a little video to show the scenario. https://www.screencast.com/t/eksMC09oipJL

I'm not sure how to fix this but hope for help to a solution.