Closed zedissime closed 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.
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 theprops.children
list. The error wasCannot read the property 'type' of undefined
caused inisReactComponent
. To avoid this I added lodash and use thecompact
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} />}
theprops.children
list looks like this :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.