<ColorlibStepIcon
                            currentIndex={label.stepID - 1}
                            icon={label.stepID}
                            stepNumber={stepNumber}
                            completed={checkCompletedSteps.includes(
                              label.stepID,
                            )}
                            active={activeStep + 1 === label.stepID}
                            data={[]}
                          />

Help me to solve below error:

1. The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.ts(2362)
(parameter) label: StepData.


Solution:

The error is occurring because the icon prop of the ColorlibStepIcon component is expecting a number, but the label.stepID value is not being converted to a number before being passed as the icon prop.

To fix this error, you can convert the label.stepID value to a number before passing it as the icon prop. Here's an example of how you can do this:


Resolved Code:

<ColorlibStepIcon
  currentIndex={label.stepID - 1}
  icon={Number(label.stepID)}
  stepNumber={stepNumber}
  completed={checkCompletedSteps.includes(label.stepID)}
  active={activeStep + 1 === label.stepID}
  data={[]}
/>