Render step conditionally

[andreoav]

Hi,

I want to know if is possible to render a step conditionally.

The following does not work.

<Steps>
    <Step />
    {condition && <Step .../>}
</Steps>

[guillaumekick]

You could render the steps in a function and add the condition in

ex:

const renderStep = ()=>{
if (test===0) return render1
else return render2
}

in the render :
{renderStep}

[andreoav]

This does not work because react-albus only parses the steps in the componentWillMount hook.

If I add or remove a step, react-albus don't handle the update.

[ohdavva]

This does not work because react-albus only parses the steps in the componentWillMount hook.

If I add or remove a step, react-albus don't handle the update.

Right .. But fixing conditional rendering on first render would be a small fix in the Steps components componentWillMount and render function (filter out falsy children). I'd gladly create a PR to fix this unless of course its unwanted/undesired functionality.

[MartinWebDev]

I am looking for similar functionality. I am pulling a list of "questions" from an API. Each question is displayed on a step. Certain questions should be skipped unless the value of other questions meets a certain condition (usually checkbox=true). So my steps need to dynamically change as the user answers questions in previous steps.

[haddyo]

I am also looking for a similar functionality where the steps should be rendered based on conditions in the previous steps.
Additionally, i determining the steps to be rendered dynamically based on JSON.
So can someone suggest an optimal and a better way to achieve the rendering of steps dynamically.

[asutedja]

With the current implementation, you would have to add all the possible Step components as a part of the initial render, and in the renderProp for the initial step, you can conditionally call next or push based on the conditions you need.

<Step
  id=“firstStep”
  render={({ push }) => {
    if (/* some conditional */) {
      push('conditionalStep');
    }
    return (
      <Fragment>
	…
      </Fragment>
    );
  }}
/>

EDIT: I would like the ability to add and remove Step component dynamically while Wizard keeps track of those changes.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove no-issue-activity label or comment or this will be closed in 5 days.

[ertemishakk]

@andreoav were you able to find a working way of dynamic step rendering?

[github-actions]

This issue is stale because it has been open 30 days with no activity.

[andreoav]

@andreoav were you able to find a working way of dynamic step rendering?

We created our own solution to handle dynamic wizards.

Unfortunately it is not open sourced.

[github-actions]

This issue is stale because it has been open 30 days with no activity.

[developering]

For anyone else that is faced with this issue, I worked around it with a combination of two things:

1. Skip any step that does not apply by using the replace prop to jump to the appropriate page. You may see the disabled route show up in the url for a split second, but otherwise it acts as if it wasn't there by replacing the history entry with the next page. Something like this:

<Step
  id="disabled-page"
  render={({ replace }) => {
	if (!isFeatureEnabled('some-feature')) {
		replace('always-on-page');
	}
    return <PageForThisStep  />
  }}
/>
<Step
  id="always-on-page"
  component={PageForThisOtherStep}
/>

2. Avoid the previous prop from the wizard. If you try to use the previous prop to go to the previous step and that step is disabled, you'll be directed right back to the next step again. The browser back button will work, but the previous prop doesn't. We had a back button all through a flow that used the previous prop. I modified that to use window.history.back() instead, which is what the browser back button is doing.

With those two approaches, I was able to achieve the same functionality that the original question was asking about.

[itamarbareket]

I might be late, but I released WhizFlow to better tackle conditionally rendering steps.

[github-actions]

This issue is stale because it has been open 30 days with no activity.