How the onChange event of a SwitchStacked can continue after modal?

I have a Switch and I want when the user Switches it to Off to display a Modal warning with Cancel and Confirm buttons. Everything works fine, my modal is displayed but when I press the Confirm button I don't know how to make the onChange event continue as expected and set the Switch value to Off. (marked by //TODO in the code below)

I have a SwitchStacked component in my child class called DetailsForm.js.

In my parent class called Details.js I call the child DetailsForm like this:

               <DetailsForm
                    fieldProps={formCommonProps}
                    selectProps={selectCommonProps}
                    model={model}
                    modules={modules}
                    areas={areas}
                    errors={errors}
                    openModal={this.openStatusModal}
                    // Pass the onChange prop to the DetailsForm component
                    onChange={event => {
                        const checked = event.target.checked;
                        if (!checked) {
                            this.openStatusModal(event); // Trigger the openModal function
                        }
                    }}
                />

The openStatusModal function is inside the parent Details.js:

openStatusModal = (event) => {
    const { dispatch } = this.props;

    const target = event.target;

    dispatch(
        openModal({
            type: 'info',
            title: literals.roles_modal_delete_warning_title,
            actions: {
                general_modal_cancel: () => dispatch(closeModal()),
                general_modal_confirm: () => {
                    dispatch(closeModal());

                    target.checked = false; //TODO: Does not work in ui, no errors, no refresh. How can I make the switch set to off?
                },
            },
        })
    );
};

Inside DetailsForm.js my SwitchStacked is like this:

       <SwitchStacked
            {...fieldProps}
            formLabelText={literals.profiles_details_status}
            label={model.isActive ? literals.groups_details_enabled : literals.groups_details_disabled}
            checked={model.isActive}
            onChange={onChange}
            inputProps={{
                id: 'isActive',
                value: !model.isActive,
                'data-boolean': true,
            }}
        />

Please note that I am using an older version of react

It seems that you're trying to control the state of the switch externally in the modal's confirm action, which might not work as expected.

The standard React way of doing this would be to lift the state up to the parent component and control the switch from there. This way, you can effectively "continue" the onChange event by setting the state of the parent component, which would then reflect on the switch.

Not sure if your using Redux based on the dispatch function in your code. Here is a possible way to do this:

First, in your parent component Details.js:

constructor(props) {
    super(props);
    this.state = {
        isActive: true, // Or however you get your initial value
    };
}

Then, in your openStatusModal function, you set isActive to false when the confirm button is clicked:

openStatusModal = (event) => {
    const { dispatch } = this.props;

    dispatch(
        openModal({
            type: 'info',
            title: literals.roles_modal_delete_warning_title,
            actions: {
                general_modal_cancel: () => dispatch(closeModal()),
                general_modal_confirm: () => {
                    dispatch(closeModal());
                    this.setState({isActive: false});
                },
            },
        })
    );
};

In your DetailsForm invocation - with an onchange event:

<DetailsForm
    fieldProps={formCommonProps}
    selectProps={selectCommonProps}
    model={model}
    modules={modules}
    areas={areas}
    errors={errors}
    openModal={this.openStatusModal}
    isActive={this.state.isActive}
    setActive={(value) => this.setState({isActive: value})}
    onChange={event => {
        const checked = event.target.checked;
        if (!checked) {
            this.openStatusModal(event);
        } else {
            this.setState({isActive: true});
        }
    }}
/>

Finally, in your DetailsForm.js file, use the isActive prop to control the checked value of the switch:

<SwitchStacked
    {...fieldProps}
    formLabelText={literals.profiles_details_status}
    label={model.isActive ? literals.groups_details_enabled : literals.groups_details_disabled}
    checked={this.props.isActive}
    onChange={onChange}
    inputProps={{
        id: 'isActive',
        value: !this.props.isActive,
        'data-boolean': true,
    }}
/>