Multistep form in React on conditions

user_14125399 0
Viewed 179

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.

react-forms reactjs javascript
1 Answers

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))
user_134850900
Related