Render from loop

Hello. I faced with some problem. My first step is Select and for each selection value I have config file with steps, because I need to change set of steps when I change select value. So, my render looks like

 <StepWizard
          isHashEnabled
          isLazyMount
          onStepChange={this.onStepChange}
        >
          {this.renderSelect()}
          {steps.map(({ Component, key }) => (
            <Component key={key} hashKey={key} />
          ))}
        </StepWizard>

The problem is that StepWizard think that there are only two steps (Select and second), although config file (steps) contains list of steps. How I can solve it?

[luistak]

Hi there!

In my case, I solved this issue mapping a list of steps into an array than rendering this list inside the StepWizard

// Example component
...

  const dynamicSteps = dynamicStepsList.map((stepy) => (
    <CustomStep
      key={stepy.id}
      data={stepy}
    />
  ));

  const renderSteps = () => {
    return [
      <SomeIntroductionSteps key={`intro-${steps.title}`} />,
      ...dynamicSteps,
    ];
  }

  return (
      <StepWizard>
        {renderSteps()}
      </StepWizard>
  );

[resolritter]

This workaround should no longer be needed if #76 works out