I’m trying to create a tabbed component that can hold components that are unknown a build time.

But I can’t figure out how to keep the state of that component when it’s not shown. I would like to create the component data in an array of objects, then depending on the shown tab, load that stored class as a render fragment.

A simplified example below hopefully detailing what I’m trying to do:

Test1.razor:

<h4>Type: Test1</h4>
<button @onclick="()=>{count++;}">Inc</button>
Count: @count
<br />
RandomCount: @ManualSet

@code
{
    private int count = 0;
    public int ManualSet { get; set; }
}

Test2.razor:

<h4>Type: Test2</h4>
<button @onclick="()=>{count++;}">Inc</button>
Count: @count
<br />
RandomCount: @ManualSet

@code
{
    private int count = 0;
    public int ManualSet { get; set; }
}

Test3.razor:

<h4>Type: Test3</h4>
<button @onclick="()=>{count++;}">Inc</button>
Count: @count
<br />
RandomCount: @ManualSet

@code
{
    private int count = 0;
    public int ManualSet { get; set; }
}

index.razor

@page "/"
<PageTitle>Index</PageTitle>

<p role="status">Current count: @activeIndex</p>

<p><button class="btn btn-primary" @onclick="ChangeIndex">Click me</button></p>

<div>
    @frags[activeIndex]
</div>


@code
{
    int activeIndex = 0;
    List<RenderFragment> frags = new List<RenderFragment>();
    List<IComponent> comps = new List<IComponent>();

    void ChangeIndex()
    {
        if (activeIndex < frags.Count() - 1)
        {
            activeIndex++;
        }
        else
        {
            activeIndex = 0;
        }
    }

    Random rnd = new Random();

    (IComponent,RenderFragment) getRandom(int randomCount)
    {
        switch (rnd.Next(0, 3))
        {
            case 0:
            {
                var b = new Test1();
                b.ManualSet = randomCount;
                RenderFragment c = (@<Test1 @ref=b />); // "Ref b" is not using data from object b as as expected
                return (b, c);
            }
            case 1:
            {
                var b = new Test2();
                b.ManualSet = randomCount;
                RenderFragment c = (@<Test2 @ref=b />);
                return (b, c);
            }
            case 2:
            {
                var b = new Test3();
                b.ManualSet = randomCount;
                RenderFragment c = (@<Test3 @ref=b />);
                return (b, c);
            }
        }
        throw new Exception("no return");
    }

    protected override async Task OnInitializedAsync()
    {
        for(int i = 0;i < 10; i++)
        {
            var random = getRandom(i);
            comps.Add(random.Item1);
            frags.Add(random.Item2);
        }
    }




}

BlazorFiddle: https://blazorfiddle.com/s/lajku15f

Results I’m looking for

Each component has it’s ManualSet variable set to it’s index id.

When modifying count using the Inc button, the count is retained, even when toggling through the items in the array.

What I’m getting

@ref doesn’t seem to be relating to the object created by getRandom and stored within comps list.

ManualSet is 0

count is reset each time the RenderFragment changes. Meaning it works as you would expect if I didn’t have @ref set and a new instance is created each time.