I'm working on implementing a modal which can open another modal. I have a user sign up modal which has a "Add Contact" button. Clicking this button triggers the "Add Contact Modal" to appear.

AddContactModal is an older component and is currently called in the App.js file right above the main Routes component.

<Router forceRefresh={!supportsHistory()}>
   <div className={appClassNames}>
     <Providers>
       <AddContactModal />
       <PhoneVerificationModal />
       <NavBar currentUser={this.state.currentUser} />
       <div className="app-content">
           {Routes(actions)}
           <Footer />
       </div>
   </Providers>
 </div>
</Router>

The Routes(actions) renders most of the application. AddContactModal also has all of its functions declared in a global context file so it can be opened from anywhere in the application.

My new modal SignUpModal lives on a particular route and has all of its functions in a local hooks folder.

-src
--context
----addContactModalContext.js
--scenes
----Contacts
-------addContactModal.js
----SignUp
------signUpHooks.js
------signUpModal.js

Because of the structure used I can call the function to open my contact modal from my signup modal. However I cannot reopen the signup modal from the contact modal.

I have tried adding event listeners to the signup page to listen for the contact modal submit and I was not successfully.

I know I could restructure things but that would be a pretty large endeavor.

Hoping someone has some advice. Ideally submitting the contact modal would trigger the sign up modal to open again ONLY when the user is on the sign up page.