How to set react state to some initial state based on the value of formfield using react and typescript?

i want to set state to initial state based on some condition using react.

what i am trying to do?

i have a checkfield named active. if user checks active field then the form field named active should be set to value which is based on option selected in the select menu.

basically it is like below,

enter image description here
so as shown in above picture, the check field will have form field named ‘active’.
if it is unchecked then the select menu is not visible and the form field with name active will be set with value ‘none’.

if it is checked, the select menu is visible and the form field with name active will be set to ‘type2’ if the type2 valueit will be set to ‘type1’ if the type1 option is selected from menu.

below is my code,

const Parent = () => { 
    const [isChecked, setIsChecked] = React.useState(false);
    return (
        <Switch
            checked={isChecked}
            disabled={mode === 'edit'}
            onChange=(() => {
                if (isChecked) {
                    setIsChecked(false);
                    form.setFieldValue('active', 'none');
                } else {
                    setIsChecked(true);
                }
            }
        />
    );
}


    
const Child = () => {
    
    const handleOnchange = (selectedType, form) => {
        if (selectedType === 'type1') {
            form.setFieldValue('active', 'type1');
        } else if (selectedType === 'type2') {
            form.setFieldValue('active', 'type2');
        } else {
            //do nothing
        }
    }
    const typeOptions = () => {
        label: 'type1', name:'type1',
        label: 'type2', name: 'type2',
    }
    return ( 
        <FormField fieldId="type">
            {({ field, form }: FieldProps) => (
                <Select 
                    options={typeOptions}
                    onChange=(()=> handleOnChange(type,form));
                    placeholder="select"
                    value=value={typeOptions.filter(option => option.value === 
                        field.value)}
                 /> 
             ))}
         </FormField>
     );
 }

The above code works. but the same Parent component used in create and edit mode. when in edit mode i want the active field to be checked if the active field value is type1 or type2 in create mode.and unchecked if the active field value is set to none in create mode.

basically in edit mode i want to retrieve the value of active field. since i am using isChecked state on switch component checked prop and when the component unmounts it will be set to false and hence the active field is unchecked in edit mode even if it is checked in create mode.

i have tried something like below,

const Parent = () => {
    const active = formikBag.values('active');
    const checked = active === 'type1' || 'type2';
    const [isChecked, setIsChecked] = React.useState(checked);
    return(
        <Switch
            disabled={mode === edit}
            checked={isChecked} // true | active is not assigned to boolean | 
            //undefined
            onChange = (() => {
                setIsChecked={false} // false is not assignable to 
                //setStateAction(true | active)
            } 
        />
    );
}

but i get errors like
true | active is not assigned to boolean | undefined
false is not assignable to setStateAction(true | active)

Not sure what is causing this. could someone help me with this. thanks.

Or in other words, how can i set checked variable to true if active variable is ‘type1’ or ‘type2’in the below statement

const checked = active === 'type1' || active === 'type2'

33 thoughts on “How to set react state to some initial state based on the value of formfield using react and typescript?”

Leave a Comment