title: Login Form validation in Reactjs : material ui <textfield>
body: <p>I am trying to do login form validation in my react app. I am new to react and I am using Material UI. So I try to enter the data in the login and password fields but I am not able to. Could someone tell me what exactly is the problem? Is it because I declared the data object in state? Following is the code:</p>
  
  <pre><code>state = {
      open: false,
      show: null,
      dialogOpen: false,
      buttonDisabled: true,
      data: {
          email: "",
          password: ""
      },
      errors: {}
  };
  
  
  handleChange = e =&gt;
      this.setState({
          data: { ...this.state.data, [e.target.name]: e.target.value }
      });
  
  onSubmit = () =&gt; {
      const errors = this.validate(this.state.data);
      this.setState({ errors });
  };
  
  validate = data =&gt; {
      const errors = {};
      if (!Validator.isEmail(data.email)) errors.email = "Invalid email";
      if (!data.password) errors.password = "Can't be blank";
      return errors;
  };
  
   const { data, errors } = this.state;
   &lt;Dialog open={this.state.dialogOpen} onClose={this.closeDialog} &gt;
                          &lt;DialogTitle&gt;Login&lt;/DialogTitle&gt;
                          &lt;DialogContent&gt;
                              &lt;DialogContentText&gt;
                                  Please enter your Login data here
                              &lt;/DialogContentText&gt;
                              &lt;form onSubmit={this.onSubmit}&gt;
                              &lt;TextField
                                  margin="dense"
                                  id="email"
                                  label="Email Address"
                                  className={classes.textField}
                                  type="email"
                                  value={data.email}
                                  onChange={this.handleChange}
                                  fullWidth
                              /&gt;
                              {errors.email &amp;&amp; &lt;InlineError text={errors.email} /&gt;}
                              &lt;TextField
                                  margin="dense"
                                  id="password"
                                  label="Password"
                                  className={classes.textField}
                                  type="password"
                                  value={data.password}
                                  onChange={this.handleChange}
                                  fullWidth
                              /&gt;
                              {errors.password &amp;&amp; &lt;InlineError text={errors.password} /&gt;}
                              &lt;Button
                                  className={classes.button}
                                  onClick={this.clickLogin}
                                  color="primary"
                              &gt;
                                  Enter
                              &lt;/Button&gt;
                              &lt;/form&gt;
                          &lt;/DialogContent&gt;
                      &lt;/Dialog&gt;
  </code></pre>