React on conditions 中的多步表单

Question

I am using Material UI multistep form in my react project. I have a requirement in which the next step of the form opens based on the currently selected option.

For example, if there are two options A and B. If I choose option A then the next step will have options related to A and if I choose option B then the next step will have options related to B.

This is how my code that renders the component based on the current step:

 function getStepsContent(stepIndex) {
  switch (stepIndex) {
  case 0:
    return <StepOne handleChange={handleChange} values={values} />;
  case 1:
    return 'Step Two (choose plan)';
  case 2:
    return 'Step three (checkout)';
  default:
    return 'unknown step';
 }
}

And this is my initial function where I have defined my steps of the form:

function getSteps() {
 return ['sign up', 'choose plan', 'checkout'];
}

I am not sure if this is the right way or not.

Can you please suggest to me the right way to implement the form component based on conditions?

Thanks in advance.

Answer 1

This is a good way of doing it, instead making function that returns steps you can just make them as normal const value like:

const steps = ['sign up', 'choose plan', 'checkout'];

and then just .map through them with your getStepsContent function:

steps.map(item => getStepsContent(item))