Got a warning passing an error on login to React state


#1

I got a Login component. and when I input wrong password I got an error and pass it to the state. And I got that warning:


Here’s a code of the component:

import React, { Component } from 'react'
import { Meteor } from 'meteor/meteor'

class Login extends Component {
  constructor () {
    super()
    this.state = {
      error: ''
    }
    this.onSubmit = this.onSubmit.bind(this)
  }

  onSubmit (event) {
    event.preventDefault()

    let email = this.email.value.trim()
    let password = this.password.value.trim()

    Meteor.loginWithPassword({ email }, password, err => {
      if (err) {
        this.setState(function () {
          return { error: 'Unable to login. Check email and password.' }
        })
      }
    })
  }
....

Also adding a code of the router component:

....
const Routes = props => {
  return (
    <Router>
      <div className='App'>
        <AppNavigation {...props} />
        <Switch>
          <Authenticated exact path='/' component={Dashboard} {...props} />
           ....
          <Public path='/login' component={Login} {...props} />
          ....
          <Route component={NoMatch} />
        </Switch>
      </div>
    </Router>
  )
}
....
const composer = (props, onData) => {
  const loggingIn = Meteor.loggingIn()
  onData(null, {
    loggingIn,
    authenticated: !loggingIn && !!Meteor.userId()
  })
}
export default composeWithTracker(composer)(Routes)

#2

The problem here is that when you press login/createAccount you set Meteor.loggingIn() to true, thus showing the Loading component.


#3

What was the solution for this?