Accepted answer

Since V4, Dialog and Modal children must be able to hold a ref.
The following can hold a ref:

  • Any Material-UI component
  • class components i.e. React.Component or React.PureComponent
  • DOM (or host) components e.g. div or button
  • React.forwardRef components
  • React.lazy components
  • React.memo components

The error declares that you provide function component as a child to modal.
To fix the error, change the function component to something that can hold a ref (e.g class component).


I just faced the exact same issue after migrating from Material-UI v3 to v4.

I totally agree with the accepted answer, nevertheless, I post here another approach, in the case someone would rather keep using a functional component (as I did).

Functional components can't hold a ref as is.

So the way of providing a ref to a child component is actually to forward it.

The React documentation has a well explained example about this, and this issue on the ReactJS Github details it a bit more.

So basically, what could be done here is :

const Transition = React.forwardRef((props, ref) => (
  <Slide direction="up" {...props} ref={ref} />

to be able to forward the ref through the Transition component, down to the Slide component.

Typescript way

⚠️ Be aware that the previous code will throw a TS2322 error if used in a Typescript project.

This error is described and solved in this Material-UI Github issue.

So, in a Typescript project, the best way (imho) to use a functional component as Transition component for a Material-UI v4 Dialog component, is the following :

import { SlideProps } from '@material-ui/core/Slide';

const Transition = React.forwardRef<unknown, SlideProps>((props, ref) => (
    <Slide direction="up" {...props} ref={ref} />

And the code above fixes both errors :

  • Failed prop type: Invalid prop children supplied to ForwardRef(Modal).
  • [TypeScript] Error: TransitionComponent type not assignable to 'ForwardRefExoticComponent'

Related Query

More Query from same tag