title: Login Authentication in react and laravel not logging
body: <p>I am new to react and react router and i am trying to make authentication with help of laravel react and react router. The page is redirecting to desired destination as the url changes when submit button is hit but there seems to be error which i cant figure out.  When i manually reload the page the component seems to render but when submit button is clicked / form is submitted the react throws below error.</p>
  
  <p><strong>Error In Console</strong></p>
  
  <pre><code>Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state. app.js:39442:7
  The above error occurred in the &lt;LoginPage&gt; component:
      in LoginPage (created by Route)
      in Route (created by withRouter(LoginPage))
      in withRouter(LoginPage) (created by Route)
      in Route (created by RouterComponent)
      in Switch (created by RouterComponent)
      in Router (created by BrowserRouter)
      in BrowserRouter (created by RouterComponent)
      in RouterComponent
      in Provider
  
  Consider adding an error boundary to your tree to customize error handling behavior.
  Error: LoginPage(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. app.js:38991:15
  Source map error: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
  Resource URL: http://127.0.0.1:8000/js/app.js
  Source Map URL: popper.js.map[Learn More]
  </code></pre>
  
  <p><strong>Login Component</strong> </p>
  
  <pre><code>import React, { Component } from 'react'
  import '../../../public/admin/css/bootstrap.min.css';
  import '../../../public/admin/css/themify-icons.css';
  import '../../../public/admin/css/styles.css';
  import { withRouter, Redirect } from 'react-router-dom';
  class LoginPage extends Component {
      constructor(props) {
          super(props);
          this.state = {
              email: '',
              password: '',
              token: '',
              loggingIn: false,
              error: []
          }
          this.changeVal = this.changeVal.bind(this);
          this.login = this.login.bind(this);
      }
      componentDidMount() {
          this.setState({
              token: document.getElementById("csrf-token").getAttribute("content")
          })
      }
      changeVal(e) {
          this.setState({
              [e.target.name]: e.target.value
          })
      }
      login(e) {
          e.preventDefault();
          let arr = {
              email: this.state.email,
              password: this.state.password,
              token: this.state.token
          };
          let route = e.target.getAttribute('action');
          axios.post(route, arr).then(response =&gt; {
              localStorage.setItem('userId', response.data[0].id);
              localStorage.setItem('loggedIn', "true");
              this.props.history.push('/admin/dashboard');
          }).catch(error =&gt; {
              if(localStorage.getItem('userId') !== null) return localStorage.removeItem('userId');
              if(localStorage.getItem('loggedIn') !== null) return localStorage.removeItem('loggedIn');
              console.log(response.error);
          })
      }
      render() {
          if ((localStorage.getItem('loggedIn') === "true")) return this.props.history.push('/admin/dashboard');
          return (
              &lt;div className="login-area"&gt;
                  &lt;div className="container"&gt;
                      &lt;div className="login-box ptb--100"&gt;
                          &lt;form method="POST" onSubmit={this.login} action="/api/login"&gt;
                              &lt;input type="hidden" name="_token" value={this.state.token} /&gt;
                              &lt;div className="login-form-head"&gt;
                                  &lt;h4&gt;Sign In&lt;/h4&gt;
                              &lt;/div&gt;
                              &lt;div className="login-form-body"&gt;
  
                                  &lt;div className="form-gp"&gt;
                                      {
                                          /*     this.props.errors.map(item =&gt; {
                                              return (
                                                  &lt;span key={item} className="text-danger d-block" role="alert"&gt;
                                                      &lt;strong&gt;{item}&lt;/strong&gt;
                                                  &lt;/span&gt;
                                              )
                                          }) */
                                      }
                                  &lt;/div&gt;
                                  &lt;div className="form-gp"&gt;
                                      &lt;input id="email" type="email" className={"form-control "} name="email" autoFocus value={this.state.email} onChange={this.changeVal} /&gt;
                                      &lt;i className="ti-email"&gt;&lt;/i&gt;
                                  &lt;/div&gt;
  
                                  &lt;div className="form-gp"&gt;
                                      &lt;input id="password" type="password" className={"form-control"} name="password" value={this.state.password} onChange={this.changeVal} /&gt;
                                      &lt;i className="ti-lock"&gt;&lt;/i&gt;
                                  &lt;/div&gt;
  
                                  &lt;div className="form-gp"&gt;
                                      &lt;a href="/password/reset"&gt;Forgot Password?&lt;/a&gt;
                                  &lt;/div&gt;
                                  &lt;div className="submit-btn-area"&gt;
                                      &lt;button id="form_submit" type="submit" &gt;{(this.props.loggedIn) ? "Submit Form" : "Please fill form"}  &lt;i className="ti-arrow-right"&gt;&lt;/i&gt;&lt;/button&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  export default (withRouter(LoginPage));
  </code></pre>
  
  <p><strong>Router Component</strong></p>
  
  <pre><code>import React,{Component} from 'react';
  import IndexPage from './components/IndexPage';
  import ContactPage from './components/ContactPage';
  import CmsPage from './components/CmsPage';
  import ErrorPage from './components/ErrorPage';
  import ThanksPage from './components/ThanksPage';
  import LoginPage from './components/LoginPage';
  import Dashboard from './components/Dashboard';
  import withRoot from './Root';
  import {PrivateRoute} from './layouts/helpers';
  import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
  class RouterComponent extends Component{
      render(){
          return (
              &lt;Router basename={'/'}&gt;
                  &lt;Switch&gt; 
                      &lt;Route path="/" exact component={withRoot(IndexPage)} /&gt;
                      &lt;Route path="/contact" exact component={withRoot(ContactPage)} /&gt;
                      &lt;Route path="/thanks" exact component={withRoot(ThanksPage)} /&gt;
                      &lt;Route path="/page/:id" exact component={withRoot(CmsPage)} /&gt;
                      &lt;Route path="/page/:id/subpage/:subId" exact component={withRoot(CmsPage)} /&gt;
                      &lt;Route path="/admin/login" exact component={LoginPage} /&gt;
                      &lt;PrivateRoute authed={(localStorage.getItem('loggedIn') === "true")} path='/admin/dashboard' component={Dashboard} /&gt;
                      &lt;Route component={ErrorPage} /&gt;
                  &lt;/Switch&gt;
              &lt;/Router&gt;
          )
      }
  }
  export default RouterComponent;
  </code></pre>
  
  <p><strong>Protected Route</strong></p>
  
  <pre><code>export function PrivateRoute ({component: Component, authed, ...rest}) {
      return (
        &lt;Route exact
          {...rest}
          render={(props) =&gt; authed === true
            ? &lt;Component {...props} /&gt;
            : &lt;Redirect to={{pathname: '/admin/login', state: {from: props.location}}} /&gt;}
        /&gt;
      )
    }
  </code></pre>
  
  <p><strong>Dashboard or where the login redirects</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { withRouter } from 'react-router-dom';
  class Dashboard extends Component {
    constructor(props){
      super(props);
      this.state = {
        token:'',
        userId: localStorage.getItem('userId'),
        loggedIn: (localStorage.getItem('loggedIn') === "true")
      }
      this.logout = this.logout.bind(this);
    }
    componentDidMount() {
        this.setState({
            token: document.getElementById("csrf-token").getAttribute("content")
        })
    }
    logout(e) {
      e.preventDefault();
      let route = e.target.getAttribute("action");
      let arr = {
        token : this.state.token
      }
      axios.post(route,arr).then(response =&gt; {
        localStorage.removeItem('loggedIn');
        localStorage.removeItem('userId');
        this.props.history.push('/admin/login');
      }).catch(error =&gt; {
        console.log(error);
      })
      console.log("route -&gt;" + route);
    }
    render() {
      return (
        &lt;&gt;
          {localStorage.getItem('userId')}
          &lt;form action="/api/logout" className="d-inline-block" method="post" onSubmit={this.logout}&gt;
            &lt;input type="hidden" name="_token" value={this.state.token} /&gt;
            &lt;button type="submit" className="btn btn-danger btn-sm"&gt;Logout&lt;/button&gt;
          &lt;/form&gt;
        &lt;/&gt;
      )
    }
  }
  export default (withRouter(Dashboard));
  </code></pre>
  
  <p><strong>Any code change or practices implementation is appreciated</strong></p>