useStepper hook's when method doesn't render any step when using only when to conditionally render a step

[Strangersknowme]

Let me explain it a bit more with an example.

My requirement is that I want to conditionally render navigation icons at the top of the form depending on if either of the refundItems or exchangeItems are non-empty.

Here's rhw concerned code using stepper where const stepper=useStepper() and I want to conditonally render the icons:

const { refundItems: refundItemsList, exchangeItems: exchangeItemsList } =
    useContext(<contextapi>);

  // Icon mapping based on index
  const icons = { refundItems: RotateCcw, exchangeItems: Replace }; //Lucide dev icons

  // Helper to determine if a step is "completed"
  const isCompleted = (index) =>
    index < stepper.current.index || buttonDisabledState;

  const onlyRefund = useMemo(
    () => refundItemsList.length > 0 && exchangeItemsList.length === 0,
    [refundItemsList, exchangeItemsList]
  );
  const onlyExchange = useMemo(
    () => exchangeItemsList.length > 0 && refundItemsList.length === 0,
    [refundItemsList, exchangeItemsList]
  );

  const conditionalStepId = useMemo(() => {
    if (onlyRefund) {
      return ["refundItems", true];
    }
    if (onlyExchange) {
      return ["exchangeItems", true];
    }
    return ["", false];
  }, [onlyRefund, onlyExchange]);

  const ConditionalIcon = useMemo(() => {
    const stepIdName = conditionalStepId[0];
    const icon = icons[stepIdName];
    return icon;
  }, [conditionalStepId]);

  return (
    <>
      {stepper.when([...conditionalStepId], () => (
        <>
          <Separator
            className={`flex-1 h-[2px] ${
              isCompleted(0) ? "bg-green-200" : "bg-neutral-200"
            }`}
          />
          <li className="flex items-center px-2">
            <div
              className={`flex w-10 h-10 bg-neutral-200 items-center justify-center rounded-full shadow-xl ${
                isCompleted(0) ? "bg-green-200" : ""
              }`}
            >
              {isCompleted(0) ? (
                <Check className="w-5 h-5" />
              ) : (
                <ConditionalIcon className="w-5 h-5" />
              )}
            </div>
          </li>
          <Separator
            className={`flex-1 h-[2px] ${
              isCompleted(0) ? "bg-green-200" : "bg-neutral-200"
            }`}
          />
        </>
      ))}
    </>
  );

As you can see from the code above, that I want to render the conditional icon depending on the if either of the list's is non-empty then I should be shown that component, right?

That's not what's happening. I think the reason why it is not rendering the exchangeItems step for my case is that since it is the 2nd step and the current step will always remain refundItems step as I am not going to the next step, it doesn't even render that step.

I am duct taping it to solve this by triggering a side effect to go to that step which isn't ideal. I was hoping if there was a way to dynamically render steps for dynamic forms. I couldn't find anything in the documentation and the documentation of when method doesn't make it clear.

This would especially be useful for dynamic steps.

[damianricobelli]

Hey! I think the best thing for you is to use the metadata API. --> https://stepperize.vercel.app/docs/react/api-references/hook#metadata

[Strangersknowme]

I don't understand how using metadata api would help. Acc. to the docs, it is used for setting some dynamic value to a step whereas I am talking about dynamic rendering of a step/steps.

Maybe, I haven't explained it properly but what I am describing is the need to have dynamic steps. Let me give you an example to make things extra clear.

Let's say you have defined a stepper with 4 distinct schemas, with what stepperize currently supports, we access each of the step by toggling between them by going next or prev.

What I am talking about is that let's say based on some condition, I only want 2 of the 4 steps defined in the stepper or even 1 i.e. dynamic rendering of a step based on some condition. This is actual conditional rendering of the entire stepper not just based on current step which is what is supported by when method currently.

I hope that makes it clear. I am sure others would find this as a useful add to this project.

[damianricobelli]

Well, you definitely have two paths to use. One can be the metadata API where you can set those conditions within the metadata and know whether or not you can render the step at any place and time. Basically you store the value of that condition in the metadata and with that you can know if you can render or not.

But another interesting option is to use the when method with an array where your first element is your step, and the next elements of the array are boolean elements that will affect your step resnernization. Check the docs in the when section there where it is explained.

[Strangersknowme]

There are problems with using those methods as our number of steps will stay intact and you will have to toggle between different steps to able to run the when method which will then check the condition, let's say you don't have any data to fill in one of the steps, what do you do? If we use these methods, we will have to keep hanging around that step in the stepper which isn't ideal. The solution is to allow for filtering such steps on a function.

I did exactly this in the pull request. Hope people find this useful:

#128

[damianricobelli]

I've seen your PR and you have a point. I wonder what problems you would have using the goTo method to go where you want instead of adding complexity to the API with a filter. If you have three steps, in terms of API and DX, the stepper should not break its definition by ‘removing’ steps from the path based on conditions. That ‘removal’ is conditional and dynamic logic that you are imposing, so I think using a custom helper on your side to determine the next or previous step with goTo would be much more ideal than a filter.

[Strangersknowme]

Because using goTo to conditonally go to some step breaks the flow of the stepper. After filling details of one schema, I want to go the next one but if the next step is the one that I don't need, I am duct taping a solution to go the next conditional step and at the same time I am still carrying around the step in the form, so if I submit the form, I am still going to be sending an empty schema which isn't ideal and I am guessing that would also break the form submit, I haven't tried it though, but I am guessing that's what would happen.