title: How to validate material ui TextField in reactjs?
body: <p>I'm using material ui TextField in my react application. I need to know how to use error and helper text validation for my below code which carry email and password?. 
  Please go through the code given below and provide me a suitable solution which i can pulloff</p>
  
  <pre><code>import React, { Component } from 'react';
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
  import AppBar from 'material-ui/AppBar';
  import RaisedButton from 'material-ui/RaisedButton';
  import TextField from 'material-ui/TextField';
  import swal from 'sweetalert';
  
  class Login extends Component {
    constructor(props){
      super(props);
      this.state={
        email: '',
        password: ''
      }
    }
  
    async handleClick() {
      const { email, password } = this.state;
      let options = {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, password })
      }
      let response = await fetch('/login', options);
      response = await response.json();        
      if (!response) {
        swal({
          title: "Wrong Entry",
          text: "Check your email and password",
          icon: "warning",
          button: "OK",
        });
        return;
      }
  
      if(response === 'user'){
        await auth.userLogin();
        this.props.history.push('/app/my');
        return;
  
      }
  
  
  
      options = {
        method: 'GET',
        headers: { 'Content-Type': 'application/json' }
      }
  
      let res = await fetch('/team-check', options);
      res = await res.json();
      await auth.login();
      if (!res) {
        this.props.history.push('/choose-teams')
      } else {
        this.props.history.push('/dashboard',{state: { detail: response }})
      }
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;MuiThemeProvider&gt;
            &lt;div&gt;
            &lt;AppBar
                title="User-Login"
              /&gt;
              &lt;TextField
                hintText="Enter your Email"
                floatingLabelText="email"
                onChange = {(event,newValue) =&gt; this.setState({email:newValue})}
                /&gt;
              &lt;br/&gt;
              &lt;TextField
                  type="password"
                  hintText="Enter your Password"
                  floatingLabelText="Password"
                  onChange = {(event,newValue) =&gt; this.setState({password:newValue})}
                  /&gt;
                &lt;br/&gt;
                &lt;RaisedButton label="Submit" primary={true} style={style} onClick={(event) =&gt; this.handleClick(event)}/&gt;
  
            &lt;/div&gt;
            &lt;Link to="/forgot-password"&gt;Forgot-Password&lt;/Link&gt;
            &lt;/MuiThemeProvider&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const style = {
    margin: 15,
  };
  
  export default Login;
  
  </code></pre>
  
  <p>I have try many answer from stack overflow, but its all are outdated now. Kindly go through my code and the help will be appreciated</p>