Conditionally display steps based on radio group?

I'm using Refine's useStepsForm with Ant Design.
https://refine.dev/docs/api-reference/antd/hooks/form/useStepsForm/

I have a radio group that sets what type of user is filling out the form. Based on this selection, I want to conditionally show certain steps that are relevant to each user type.

Let's say step 1 has the radio group to set the user to type A, B, or C. If user A is selected, I want to show step 2 then move onto step 5. If user B is selected, I move straight to step 3 and then step 5, missing step 2 and 4.

Currently I have this the radio group setting state and if I wrap my <Step> component, it works for that, but the content of the step doesn't display correctly, only for the first option.

const [userType, setUserType] = useState(null);
const onChangeUserType = (e: RadioChangeEvent) => {
  setUserType(e.target.value);
};
const formList = [
  <Form.Item label='User type?' name='user_type'>
    <Radio.Group onChange={onChangeUserType} value={userType}>
    {userTypes.map((user) => (
      <Radio key={user.id} value={user.id}>
        {user.title}
      </Radio>
    ))}
  </Radio.Group>
</Form.Item>,
userType === 1 && (
  <Form.Item label='Field for user 1' name='user_1_field'>
    <Input />
  </Form.Item>
),
userType === 2 && (
  <Form.Item label='Field for user 2' name='user_2_field'>
    <Input />
  </Form.Item>
),
userType === 3 && (
  <Form.Item label='Field for user 3' name='user_3_field'>
    <Input />
  </Form.Item>
),
<Form.Item label='Field for all users' name='field_all_1'>
  <Input />
</Form.Item>,
];

return (
  <Create saveButtonProps={saveButtonProps}>
    <Steps {...stepsProps}>
      <Step title='User type' />
      {userType === 1 && <Step title='Step 2' />}
      {userType === 2 && <Step title='Step 3' />}
      {userType === 3 && <Step title='Step 4' />}
      <Step title='Step 5' />
    </Steps>
  <Form {...formProps}>{formList[current]}</Form>
</Create>
);

const [userType, setUserType] = useState(null);
const onChangeUserType = (e: RadioChangeEvent) => {
  setUserType(e.target.value);
};
const formList = [
  <Form.Item label='User type?' name='user_type'>
    <Radio.Group onChange={onChangeUserType} value={userType}>
    {userTypes.map((user) => (
      <Radio key={user.id} value={user.id}>
        {user.title}
      </Radio>
    ))}
  </Radio.Group>
</Form.Item>,
userType === 1 && (
  <Form.Item label='Field for user 1' name='user_1_field'>
    <Input />
  </Form.Item>
),
userType === 2 && (
  <Form.Item label='Field for user 2' name='user_2_field'>
    <Input />
  </Form.Item>
),
userType === 3 && (
  <Form.Item label='Field for user 3' name='user_3_field'>
    <Input />
  </Form.Item>
),
<Form.Item label='Field for all users' name='field_all_1'>
  <Input />
</Form.Item>,
];

return (
  <Create saveButtonProps={saveButtonProps}>
    <Steps {...stepsProps}>
      <Step title='User type' />
      {userType === 1 && <Step title='Step 2' />}
      {userType === 2 && <Step title='Step 3' />}
      {userType === 3 && <Step title='Step 4' />}
      <Step title='Step 5' />
    </Steps>
  <Form {...formProps}>{formList[current]}</Form>
</Create>
);

const [userType, setUserType] = useState(null);
const onChangeUserType = (e: RadioChangeEvent) => {
  setUserType(e.target.value);
};
const formList = [
  <Form.Item label='User type?' name='user_type'>
    <Radio.Group onChange={onChangeUserType} value={userType}>
    {userTypes.map((user) => (
      <Radio key={user.id} value={user.id}>
        {user.title}
      </Radio>
    ))}
  </Radio.Group>
</Form.Item>,
userType === 1 && (
  <Form.Item label='Field for user 1' name='user_1_field'>
    <Input />
  </Form.Item>
),
userType === 2 && (
  <Form.Item label='Field for user 2' name='user_2_field'>
    <Input />
  </Form.Item>
),
userType === 3 && (
  <Form.Item label='Field for user 3' name='user_3_field'>
    <Input />
  </Form.Item>
),
<Form.Item label='Field for all users' name='field_all_1'>
  <Input />
</Form.Item>,
];

return (
  <Create saveButtonProps={saveButtonProps}>
    <Steps {...stepsProps}>
      <Step title='User type' />
      {userType === 1 && <Step title='Step 2' />}
      {userType === 2 && <Step title='Step 3' />}
      {userType === 3 && <Step title='Step 4' />}
      <Step title='Step 5' />
    </Steps>
  <Form {...formProps}>{formList[current]}</Form>
</Create>
);

const [userType, setUserType] = useState(null);
const onChangeUserType = (e: RadioChangeEvent) => {
  setUserType(e.target.value);
};
const formList = [
  <Form.Item label='User type?' name='user_type'>
    <Radio.Group onChange={onChangeUserType} value={userType}>
    {userTypes.map((user) => (
      <Radio key={user.id} value={user.id}>
        {user.title}
      </Radio>
    ))}
  </Radio.Group>
</Form.Item>,
userType === 1 && (
  <Form.Item label='Field for user 1' name='user_1_field'>
    <Input />
  </Form.Item>
),
userType === 2 && (
  <Form.Item label='Field for user 2' name='user_2_field'>
    <Input />
  </Form.Item>
),
userType === 3 && (
  <Form.Item label='Field for user 3' name='user_3_field'>
    <Input />
  </Form.Item>
),
<Form.Item label='Field for all users' name='field_all_1'>
  <Input />
</Form.Item>,
];

return (
  <Create saveButtonProps={saveButtonProps}>
    <Steps {...stepsProps}>
      <Step title='User type' />
      {userType === 1 && <Step title='Step 2' />}
      {userType === 2 && <Step title='Step 3' />}
      {userType === 3 && <Step title='Step 4' />}
      <Step title='Step 5' />
    </Steps>
  <Form {...formProps}>{formList[current]}</Form>
</Create>
);

useStepsForm | refine

useStepsForm hook allows you to split your form under an Ant Design based Steps component and provides you with a few useful functionalities that will help you manage your form.

Conditionally display steps based on radio group?

Similar Threads

Similar Threads

Similar Threads