title: React Material-UI Modal TypeError: Cannot read property 'hasOwnProperty' of undefined
body: <p>Any time I add a modal to one of my classes I get this error.</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'hasOwnProperty' of undefined</p>
  </blockquote>
  
  <p>Here's a basic example where I'm just trying to always show a basic modal. Any ideas? I've tried various examples that should work, but nothing I have tried prevents the error. Seems if I add Modal then it just errors.</p>
  
  <p>Edit: Figured out the issue. The modal requires a single root level child you need to embed all your content in. </p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  import { Link } from 'react-router-dom';
  import Avatar from '@material-ui/core/Avatar';
  import Button from '@material-ui/core/Button';
  import CssBaseline from '@material-ui/core/CssBaseline';
  import TextField from '@material-ui/core/TextField';
  import FormControlLabel from '@material-ui/core/FormControlLabel';
  import Checkbox from '@material-ui/core/Checkbox';
  import Grid from '@material-ui/core/Grid';
  import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
  import Typography from '@material-ui/core/Typography';
  import { withStyles } from '@material-ui/core/styles';
  import Container from '@material-ui/core/Container';
  import { Schema, Field } from "v4f";
  import Modal from '@material-ui/core/Modal';
  
  const styles = theme =&gt; ({
      '@global': {
          body: {
              backgroundColor: theme.palette.common.white,
          },
      },
      paper: {
          marginTop: theme.spacing(8),
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
      },
      avatar: {
          margin: theme.spacing(1),
          backgroundColor: theme.palette.secondary.main,
      },
      form: {
          width: '100%', // Fix IE 11 issue.
          marginTop: theme.spacing(1),
      },
      submit: {
          margin: theme.spacing(3, 0, 2),
      },
  });
  
  const initState = {
      email: "",
      password: "",
      errors: {}
  };
  
  const SignInValidator = Schema(
      {
          email: Field()
              .string()
              .email({ message: "Not an e-mail address" })
              .required({ message: "E-mail is required" }),
          password: Field()
              .string()
              .required({ message: "Password is required" })
      },
      { verbose: true, async: true  }
      // We set the options on creation all call to Schema Product will be verbose and async
  );
  
  class SignIn extends React.Component
  {
      constructor(props) {
          super(props);
          this.state = { ...initState };
      }
  
      //Handle Submit &amp; Handle Change
      handleChange = (e) =&gt; {
          this.setState({ [e.target.name]: e.target.value });
      }
  
      handleDirty = (e) =&gt; {
          const { name, value } = e.target;
          const isValid = SignInValidator[name].validate(value, {
              verbose: true,
              values: this.state
          });
  
          if (isValid !== true) {
              this.setState({
                  errors: { ...this.state.errors, [name]: isValid }
              });
          }
          else {
              this.setState({
                  errors: { ...this.state.errors, [name]: undefined }
              });
          }
      }
  
      handleSubmit = (e) =&gt; {
          e.preventDefault();
          SignInValidator.validate(this.state)
              .then(data =&gt; {
                  this.login();
              })
              .catch(errors =&gt; {
                  this.setState({ errors });
              });
      }
  
      login = (e) =&gt; {
  
  
          var email = encodeURI(this.state.email);
          var password = encodeURI(this.state.password);
          fetch(`/login/login?Username=${email}&amp;Password=${password}`)
              .then(data =&gt; {
                  console.log(data);
                  alert("Login Success!");
                  //Navigate to the dashboard
                  this.setState(initState);
              })
              .catch(e =&gt; {
                  alert("Login Failed");
                  console.error(e);
              });
      };
  
      render()
      {
          const { classes } = this.props; 
  
          return (
              &lt;Container component="main" maxWidth="xs"&gt;
                  &lt;CssBaseline /&gt;
                  &lt;div className={classes.paper}&gt;
                      &lt;Avatar className={classes.avatar}&gt;
                          &lt;LockOutlinedIcon /&gt;
                      &lt;/Avatar&gt;
                      &lt;Typography component="h1" variant="h5"&gt;
                          Sign in
                      &lt;/Typography&gt;
                      &lt;form className={classes.form}&gt;
                          &lt;TextField
                              variant="outlined"
                              margin="normal"
                              required
                              fullWidth
                              id="email"
                              label="Email Address"
                              name="email"
                              autoComplete="email"
                              onChange={this.handleChange}
                              onBlur={this.handleDirty}
                              error={this.state.errors.email !== undefined}
                              helperText={this.state.errors.email}
                              value={ this.state.email }
                          /&gt;
                          &lt;TextField
                              variant="outlined"
                              margin="normal"
                              required
                              fullWidth
                              name="password"
                              label="Password"
                              type="password"
                              id="password"
                              onChange={this.handleChange}
                              onBlur={this.handleDirty}
                              error={this.state.errors.password !== undefined}
                              helperText={this.state.errors.password}
                              value={this.state.password}
                              autoComplete="current-password"
                          /&gt;
                          &lt;FormControlLabel
                              control={&lt;Checkbox value="remember" color="primary" /&gt;}
                              label="Remember me"
                          /&gt;
                          &lt;Button
                              type="submit"
                              fullWidth
                              variant="contained"
                              color="primary"
                              className={classes.submit}
                              onClick={this.handleSubmit}
                          &gt;
                              Sign In
                      &lt;/Button&gt;
                          &lt;Grid container&gt;
                              &lt;Grid item xs&gt;
                                  &lt;Link to='/' variant="body2"&gt;
                                      Forgot password?
                              &lt;/Link&gt;
                              &lt;/Grid&gt;
                              &lt;Grid item&gt;
                                  &lt;Link to='/sign-up' variant="body2"&gt;
                                      {"Don't have an account? Sign Up"}
                                  &lt;/Link&gt;
                              &lt;/Grid&gt;
                          &lt;/Grid&gt;
                      &lt;/form&gt;
                      &lt;Modal open={true}&gt;
                          Hello
                      &lt;/Modal&gt;
                  &lt;/div&gt;
              &lt;/Container&gt;
          );
      }
  }
  
  export default connect()(withStyles(styles)(SignIn));
  </code></pre>