title: "Maximum update depth exceeded" error in react and react-cookie
body: <p>I implemented a simple Login Form in React with Redux following this tutorial: <a href="https://jslancer.com/blog/2017/04/27/a-simple-login-flow-with-react-and-redux/" rel="nofollow noreferrer">https://jslancer.com/blog/2017/04/27/a-simple-login-flow-with-react-and-redux/</a></p>
  
  <p>Everything works, but when I add cookies I get the error:</p>
  
  <blockquote>
    <p>Warning: Cannot update during an existing state transition (such as
    within <code>render</code>). Render methods should be a pure function of props
    and state.</p>
  </blockquote>
  
  <p>and also:</p>
  
  <blockquote>
    <p>Uncaught Invariant Violation: Maximum update depth exceeded. This can
    happen when a component repeatedly calls setState inside
    componentWillUpdate or componentDidUpdate. React limits the number of
    nested updates to prevent infinite loops.</p>
  </blockquote>
  
  <p>I did some debugging and if I remove <code>onChange={e =&gt; this.setState({password: e.target.value})}</code> from the inputs in the code below the error disappears.</p>
  
  <p>Any ideas why the following code is not working?</p>
  
  <pre><code>import { connect } from 'react-redux';
  import { withCookies } from 'react-cookie'
  
  class LoginForm extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        username: '',
        password: ''
      };
    }
  
    render() {
      let {username, password} = this.state;
      let { cookies, allCookies, isLoginPending, isLoginSuccess, loginError} = this.props;
      cookies.set('username', 'Ross', { path: '/', secure: true, httpOnly: true});
      console.log(cookies.get('username'));
      return (
        &lt;form name="loginForm" onSubmit={this.onSubmit}&gt;
          &lt;div className="form-group-collection"&gt;
            &lt;div className="form-group"&gt;
              &lt;label&gt;Username:&lt;/label&gt;
              &lt;input type="text" name="username" onChange={e =&gt; this.setState({username: e.target.value})} value={username}/&gt;
            &lt;/div&gt;
            &lt;div className="form-group"&gt;
              &lt;label&gt;Password:&lt;/label&gt;
              &lt;input type="password" name="password" onChange={e =&gt; this.setState({password: e.target.value})} value={password}/&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      )
    }
  }
  
  const mapStateToProps = (state) =&gt; {
    return {
      isLoginPending: state.isLoginPending,
      isLoginSuccess: state.isLoginSuccess,
      loginError: state.loginError,
    };
  }
  
  export default withCookies(connect(mapStateToProps, null)(LoginForm));``` 
  </code></pre>