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.
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>
)};