i want to set the value of toggle switch based on another form field that user has set using react, typescript and formik.

what i am trying to do? code is like below

in constants file

export const OPTION_KEY = 'option';
export const SWITCH_KEY = 'switch';
export const initialValues: SomeValues = {
    [OPTION_KEY] = '',
    [SWITCH_KEY] = '',
}; 

in another file

import {OPTION_KEY, SWITCH_KEY} from 'constants';

const options: SelectOption[] = [
    { value: 'option1', label: 'option1' },
    { value: 'option2', label: 'option2' },
    { value: 'option3', label: 'option3' },
];

const FirstStep = ({formikBag} : formikBag: FormikProps<SomeValues>;}) => {
    return(
        <FormField label="Option" fieldId={OPTION_KEY}>
            {({field, form}: FieldProps) => (
                <Select
                    id={field.name}
                    inputId={field.name}
                    onChange={(option: SelectOption) =>
                        form.setFieldValue(field.name, option.value)
                    }
                    options={options}
                    placeholder={options[0].label}
                    value={options.filter(option=> option.value === field.value)}
                />
            </FormField>
            <FormField label="switch" fieldId={SWITCH_KEY}>
                {({ field, form }: FieldProps) => (
                    <Switch
                        id={'switch'}
                        {...field}
                        checked={isSwitchToggled}
                        onChange={() => {
                                form.setFieldValue(SWITCH_KEY,'');
                        }
                    }}
                />
            )}
        </FormField>
    )};

Now what i want to do is, when user selects option1 or option2 in select menu (that is OPTION_KEY) then by default i want the SWITCH_KEY to be turned off. if user selects option3 then by default SWITCH_KEY should be turned on.

now user can also toggle the SWITCH_KEY on or off even though option selected by user is option1 or option2 or option3.

how can i modify the above code meaning how should i set the SWITCH_KEY state based on option user selected and then if user toggles it how can i set SWITCH_KEY to on or off. could someone help me with this.

I am new to using formik and react. thanks.

CodePudding user response：

Keep the state of your switch somewhere in the component's state, eg. isSwitchToggled (idk what this variable isSwitchToggled of yours is doing, but it sure looks like a state variable) and just modify that state var based on the option chosen. Then, render your switch accordingly:

const FirstStep = ({formikBag} : formikBag: FormikProps<SomeValues>;}) => {
    const [isSwitchToggled, setSwitchToggled] = React.useState(false);

    const setSwitch = (fieldName, fieldValue) => {
        if (fieldName === 'name' && fieldValue === 'John') {
            setSwitchToggled(true);
        } else setSwitchToggled(false);
    }

    return(
        <FormField label="Option" fieldId={OPTION_KEY}>
            {({field, form}: FieldProps) => (
                <Select
                    id={field.name}
                    inputId={field.name}
                    onChange={(option: SelectOption) =>
                        form.setFieldValue(field.name, option.value)

                        setSwitch(field.name, option.value)
                    }
                    options={options}
                    placeholder={options[0].label}
                    value={options.filter(option=> option.value === field.value)}
                />
            </FormField>
            <FormField label="switch" fieldId={SWITCH_KEY}>
                {({ field, form }: FieldProps) => (
                    <Switch
                        id={'switch'}
                        {...field}
                        checked={isSwitchToggled}
                        onChange={() => {
                                form.setFieldValue(SWITCH_KEY,'');
                        }
                    }}
                />
            )}
        </FormField>
    )};