Render from loop

[kchupakhin]

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?

[rashisinha]

Hi @kchupakhin Did you get a solution to this problem?

[kchupakhin]

Hi @rashisinha, I took code and modified it, also I removed some extra code for me (I needed less functionality)

[rashisinha]

Ok thanks @kchupakhin , I am trying to create a wrapper on top of this library so that I can use this wizard in multiple components. But I am not able to figure out how to dynamically send steps components for each parent component.

[kchupakhin]

@rashisinha, problem in my case was that I had to pass stepsList which depends on some select component before. And inside, wizard thought that it has only two children, that why I added inside .flat method when I get children from props. I'm not sure, that we have the same problem. Maybe I didn’t quite understand the explanation of your problem.

[rashisinha]

@kchupakhin In my case also, the stepList is dynamic and keeps changing depending on user selection. How did you import the components present in stepList in your component as the stepList is dynamic and this list keeps changing.

[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