jcmcneal / react-step-wizard

A modern flexible step wizard component built for React.
MIT License
583 stars 126 forks source link

Handle conditional steps, update example #40

Closed zedissime closed 5 years ago

zedissime commented 5 years ago

In my uses case I had to enhance the wizard in order to add or remove steps dynamically.

It wasn't possible because the condition did return undefined in the props.children list. The error was Cannot read the property 'type' of undefined caused in isReactComponent. To avoid this I added lodash and use the compact method to remove unwanted values in the children array.

I also had to add or remove steps based on a dynamical array. The main issue resolved in this PR is that when we add a {array.map((item) => <Step {...item} />} the props.children list looks like this :

[
  <Step />,
  <Step />,
  [Array],
  ...

]

This caused an issue with the children length and broke the navigation. I do resolve this by flattening the children array with the flatten lodash method.

Those are some very simple updates, don't hesitate to correct me if i'm wrong.

jcmcneal commented 5 years ago

It sounds like you're wanting to dynamically add or remove child steps, is that right? You could handle that in the parent component and then reinitialize the StepWizard state. I think this could be accomplished automatically by implementing useEffect, or just revisiting how the state is setup.

Unfortunately, I can't allow to bring in 3rd party libraries as it will bloat the bundle and I want to keep this bundle as lean as possible.