React Material-UI Modal TypeError: Cannot read property ‘hasOwnProperty’ of undefined

Explanation

The reason for MUI Modal component having the error

TypeError: Cannot read property ‘hasOwnProperty’ of undefined

Is that you didn’t give a JSX component as a child.


Solution

Change from this

<Modal open={true}>
  Hello
</Modal>

to

<Modal open={true}>
  <div>  
    Hello
  </div>
</Modal>

More

If you search the source of Material-UI project by the keyword hasOwnProperty. or following the error callback stack

You would find something in

  • packages\material-ui\src\Modal\Modal.js
function getHasTransition(props) {
  return props.children ? props.children.props.hasOwnProperty('in') : false;
}

The error means the props.children.props is undefined, which gave the debug thought.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)