jquery modal('hide') method is not working in reactJs

Question

I have a login modal that is toggled by a button with data-toggle and data-target attributes. After doing the authentication, I need to close the modal so I used $('#exampleModalCenter').modal('hide') but it doesn't work and throw this error instead:

Uncaught (in promise) TypeError: (0 , jquery__WEBPACK_IMPORTED_MODULE_6__.$) is not a function
    at onSubmit (Login.js:30:1)
    at createFormControl.ts:1048:1
onSubmit @ Login.js:30
(anonymous) @ createFormControl.ts:1048
await in (anonymous) (async)
callCallback @ react-dom.development.js:4161
invokeGuardedCallbackDev @ react-dom.development.js:4210
invokeGuardedCallback @ react-dom.development.js:4274
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4288
executeDispatch @ react-dom.development.js:9038
processDispatchQueueItemsInOrder @ react-dom.development.js:9070
processDispatchQueue @ react-dom.development.js:9083
dispatchEventsForPlugins @ react-dom.development.js:9094
(anonymous) @ react-dom.development.js:9285
batchedUpdates$1 @ react-dom.development.js:26096
batchedUpdates @ react-dom.development.js:3988
dispatchEventForPluginEventSystem @ react-dom.development.js:9284
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6462
dispatchEvent @ react-dom.development.js:6454
dispatchDiscreteEvent @ react-dom.development.js:6427

My modal JSX code:

<div class="modal" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">Login</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form onSubmit={handleSubmit(onSubmit)}>
                            <div className="form-group">
                                <label>Email</label>
                                <input {...register("email", { required: true, pattern: /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g })} type="text" className="form-control" placeholder="Email" />
                                {errors.email?.type === 'required' && <FormErrorMsg message="Email is required" />}
                                {errors.email?.type === 'pattern' && <FormErrorMsg message="Invalid email" />}
                            </div>
                            <div className="form-group">
                                <label>Password</label>
                                <input {...register("password", { required: true })} type="password" className="form-control" placeholder="Password" />
                                {errors.password?.type === 'required' && <FormErrorMsg message="Password is required" />}
                            </div>
                            <button type="submit" class="btn btn-primary">Login</button>
                            <button type="button" class="btn btn-secondary ml-2" data-dismiss="modal">Close</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

How I handle the onSubmit event:

const onSubmit = data => {
        async function fetchLogin (){
            let rs = await login(data.email, data.password);
        
            return rs;
        }

        let loginSuccess = fetchLogin();

        if (loginSuccess) {
            dispatch(loginAction());
            $('#exampleModalCenter').modal('hide');
        }
    }

Could you please help me with this? Thank you very much for your precious time.

Answer 1

I have used another library that comes with modal component, react-bootstrap for specific and that solved the problem. I handle the animation using javascript instead of jquery and that is a lot easier.