Is there a way for an array to hold blazor components?

Question

I currently have a razor file set up that looks like the following:

 @switch (currentStep)
        {
            case 0:
                <Component1 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"  />
                break;
            case 1:
                <Component2 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward" />
                break;
            case 2:
                <Component3 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"/>
                break;
            case 3:
                <Component3/>
                break;
            default:
                <p>Some error message</p>
                break;
        }
        </div>`
    @code {
        private int currentStep = 0;
        private void MoveForward()
        {
            if (currentStep < 3) currentStep += 1;
        }
        private void MoveBackward()
        {
            if (currentStep > 0) currentStep -= 1;
        }
    }

Where I am increasing "currentStep" inside each of the components using moveforward / movebackwards as callbacks to display the next component. I was wondering, instead of an switch statement, could I create an array that just has all the components inside, and then call the array? something like the below?

    <@steps[currentStep]>
@code{
    private __[] steps = new String[]
    {
        <component1 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"  />
        <component2 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"  />
        <component3 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"  />
        <component4 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"  />
    }
}

I'm just not sure what kind of type the array should have if this might be possible, and how to create that type.

Any help would be much appreciated thank you!

Answer 1

An alternative take on this is to store the component markup in an array of RenderFragment, just slightly different from your idea:

@steps[currentStep] 

@code{
  private RenderFragment[] steps;
  private int currentStep = 0;

  protected override void OnInitialized()
  {
    steps = new RenderFragment[4];
    steps[0] = @<component1 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"  />;
    steps[1] = @<component2 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"  />;
    steps[2] = @<component3 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"  />;
    steps[3] = @<component4 MoveForwardCallback="MoveForward" MoveBackwardCallback="MoveBackward"  />;
  }

  private void MoveForward()
  {
    if (currentStep < 3) currentStep += 1;
  }

  private void MoveBackward()
  {
    if (currentStep > 0) currentStep -= 1;
  }
}

Sample: https://blazorrepl.com/repl/wvuoOtYb026k7nQj39