title: Closing dialog if post request is sucessful
body: <p>I am using React, Redux, NodeJS, and ExpressJS. I am also using material-ui for the front-end. I have created a dialog where users can input information and signup. Once a user clicks submit, a post req is made. Any errors that are returned would be than put into the errors object in the state. If any errors are returned (ex. passwords don't match) they are stated below the input field. If the submit button is clicked and there are no errors, the dialog stays open. How would I make the dialog be closed if there are no errors returned (the state.open should be turned to false). How would I do this. Here is my code:</p>
  
  <p>authActions.js:</p>
  
  <pre><code>export const registerUser = (userData, history) =&gt; dispatch =&gt; {
    axios
      .post("/api/users/register", userData)
      .then(res =&gt; history.push("/signup/done"))
      .catch(err =&gt;
        dispatch({
          type: GET_ERRORS,
          payload: err.response.data
        })
      );
  };
  </code></pre>
  
  <p>signup.js:</p>
  
  <pre><code>class SignUpD extends Component {
    constructor() {
      super();
      this.state = {
        open: false,
        username: "",
        email: "",
        password: "",
        password2: "",
        errors: {}
      };
      this.onChange = this.onChange.bind(this);
      this.onSubmit = this.onSubmit.bind(this);
    }
    componentDidMount() {
      if (this.props.auth.isAutenticated) {
        this.props.history.push("/");
      }
    }
    componentWillReceiveProps(nextProps) {
      if (nextProps.errors) {
        this.setState({ errors: nextProps.errors });
      }
    }
  
    handleClickOpen = () =&gt; {
      this.setState({ open: true });
    };
  
    handleClose = () =&gt; {
      this.setState({ open: false, errors: {} });
    };
  
    onChange(e) {
      this.setState({ [e.target.name]: e.target.value });
    }
  
    onSubmit(e) {
      e.preventDefault();
  
      const newUser = {
        username: this.state.username,
        email: this.state.email,
        password: this.state.password,
        password2: this.state.password2
      };
  
      this.props.registerUser(newUser, this.props.history);
    }
  
    render() {
      const { errors } = this.state;
  
      return (
        &lt;div&gt;
          &lt;ListItem
            button
            style={{ paddingTop: 60, top: 0 }}
            onClick={this.handleClickOpen}
          &gt;
            &lt;ListItemText primary="Sign Up" /&gt;
          &lt;/ListItem&gt;
          &lt;Dialog
            fullWidth
            open={this.state.open}
            onClose={this.handleClose}
            aria-labelledby="form-dialog-title"
            style={{ width: "100" }}
          &gt;
            &lt;DialogTitle id="form-dialog-title"&gt;Register&lt;/DialogTitle&gt;
  
            &lt;DialogContent&gt;
              &lt;DialogContentText&gt;
                Enter registration details here
              &lt;/DialogContentText&gt;
              &lt;TextField
                margin="dense"
                name="email"
                label="Email Address"
                value={this.state.email}
                fullWidth
                onChange={this.onChange}
              /&gt;
              {errors.email &amp;&amp; &lt;div style={{ color: "red" }}&gt;{errors.email}&lt;/div&gt;}
              &lt;TextField
                margin="dense"
                name="username"
                label="Username"
                type="text"
                value={this.state.username}
                fullWidth
                onChange={this.onChange}
              /&gt;
              {errors.username &amp;&amp; (
                &lt;div style={{ color: "red" }}&gt;{errors.username}&lt;/div&gt;
              )}
              &lt;TextField
                margin="dense"
                name="password"
                label="Password"
                type="password"
                value={this.state.password}
                fullWidth
                onChange={this.onChange}
              /&gt;
              {errors.password &amp;&amp; (
                &lt;div style={{ color: "red" }}&gt;{errors.password}&lt;/div&gt;
              )}
              &lt;TextField
                margin="dense"
                name="password2"
                label="Enter Password Again"
                value={this.state.password2}
                type="password"
                fullWidth
                onChange={this.onChange}
              /&gt;
              {errors.password2 &amp;&amp; (
                &lt;div style={{ color: "red" }}&gt;{errors.password2}&lt;/div&gt;
              )}
            &lt;/DialogContent&gt;
            &lt;DialogActions&gt;
              &lt;Button onClick={this.handleClose} color="primary"&gt;
                Cancel
              &lt;/Button&gt;
              &lt;Button onClick={this.onSubmit} color="primary"&gt;
                Register
              &lt;/Button&gt;
            &lt;/DialogActions&gt;
          &lt;/Dialog&gt;
        &lt;/div&gt;
      );
    }
  }
  
  SignUpD.propTypes = {
    registerUser: PropTypes.func.isRequired,
    auth: PropTypes.object.isRequired,
    errors: PropTypes.object.isRequired
  };
  const mapStateToProps = state =&gt; ({
    auth: state.auth,
    errors: state.errors
  });
  
  export default connect(
    mapStateToProps,
    { registerUser }
  )(withRouter(SignUpD));
  </code></pre>
  
  <p>If you need any clarification, or have questions let me know. Thanks in advance.</p>