React Material Modal TransitionProps not firing onEntering

So I am working to update Material UI to v5, and I first got an error that onEntering is deprecated and to use transitionprops.

I have a method, let's call it doSomething, that I want to fire when the modal opens.

If I do it like this, I don't have any errors, but doSomething is not called when the modal is opened:

<Modal
   TransitionProps = {{ onEntering: (): void => doSomething() }}
>
...
</Modal>

On the other hand, if I do the following, there is an infinite loop of doSomething being called, as well as an error about void is not assignable to type ((node: HTMLElement, isAppearing: boolean) => void) | undefined

<Modal
   TransitionProps= {{ onEntering: doSomething() }}
>
...
</Modal>

I have checked the material upgrade documentation, and it has no good examples of what to do on the assigning of the function/method to be called during the transitions.

It just shows that instead of onEntering={doSomething} to use TransitionProps={{ onEnter, onEntering, etc. }} which does not help in regards to how to set onEntering to call the function.

Solution

Your issue may stem from the fact that TrasitionProps exists on the Dialog, not the Modal (Dialog inherits from Modal, which in turn inherits from @mui/base's headless Unstyled Modal).

Modal

If you're attempting to handle these events on a Modal, you'd pass the handlers to your own transition component (in my example, I used Fade):

import Modal from "@mui/material/Modal";
import Fade from "@mui/material/Fade";

...

<Modal open={open}>
  <Fade
    onEntered={handleEntered}
    onExiting={handleExiting}
    onExited={handleExited}
    in={open}
  >
    ...
  </Fade>
</Modal>

Working CodeSandbox: https://codesandbox.io/s/spring-field-sw9fxq?file=/demo.js

Dialog

If you're attempting to handle these events on a Dialog, you'd pass the handlers via TransitionProps to the Dialog:

import Dialog from "@mui/material/Dialog";

...

<Dialog
  open={open}
  TransitionProps={{
    onEntered: handleEntered,
    onExiting: handleExiting,
    onExited: handleExited
  }}
>
  ...
</Dialog>

Working CodeSandbox: https://codesandbox.io/s/jolly-sanne-0t5mks?file=/demo.js