How to add multiple components dynamically using RenderFragment

[SevvandhiN]

Hi There!!!

I used RenderFragment to add dynamic components in the click of a button. Now, components rendered just once when I click on the button and i want to add the components on every click. Please help me sort out this issue.

Here is the code I tested.

<div id="component-container">
    @DynamicRender
</div>

<button @onclick="RenderComponent">DynamicRender</button>

@code {

    private RenderFragment DynamicRender { get; set; }

    RenderFragment CreateDynamicComponent() => builder =>
    {
        builder.OpenComponent(0, typeof(SurveyPrompt));
        builder.AddAttribute(1, "Title", "Some title");
        builder.CloseComponent();
    };

    private void RenderComponent()
    {
        DynamicRender =  CreateDynamicComponent();
    }
}

[JeyanthVictory]

I am also encountering the same. Correct me where I am wrong. Any solution would be helpful.

[FLAMESpl]

You are not adding new components on click but overwriting the same variable over and over.
You need either list of Render Fragments and loopover them in markup or keep a counter of current clicks and loop it in the builder.

@foreach (var fragment in dynamicFragments)
{
    @fragment
}

...

code {
    // use inline assigment instead of lifecycle methods to avoid issues with pre-rendering
    private List<RenderFragment> dynamicFragments = new List<RenderFragment>();

    private void RenderComponent()
    {
        dynamicFragments.Add(CreateDynamicComponent());
    }
}

or

    var counter = 0;

    RenderFragment CreateDynamicComponent() => builder =>
    {
        for (var i = 0; i < counter; i++)
        {
             var index = i * 2;
             builder.OpenComponent(index, typeof(SurveyPrompt));
             builder.AddAttribute(index + 1, "Title", "Some title");
             builder.CloseComponent();
        }
    };

    private void RenderComponent()
    {
        counter++;
        DynamicRender = CreateDynamicComponent();
    }

I haven't run this code.

[FLAMESpl]

If you are not exercising dynamic builders there is a much simpler solution to "add components on button click".
Just have a numeric counter and make a loop in markup

@for (var i = 0; i < counter; i++)
{
    <SurveyPrompt Title="Some Title" />
}

@code {
    int counter = 0;

    private void OnClick()
    {
         counter++;
    }
}