Uncaught TypeError: Cannot read property 'loginHandler' of undefined

help
1

Hey, I am getting an Error

Uncaught TypeError: Cannot read property ‘loginHandler’ of undefined
at submitHandler (LoginPage.jsx:25)
at HTMLUnknownElement.callCallback (modules.js?hash=cf25b6b04018a65ac2c812e250e87f3c8b62fbc4:10821)
at Object.invokeGuardedCallbackDev (modules.js?hash=cf25b6b04018a65ac2c812e250e87f3c8b62fbc4:10871)
at invokeGuardedCallback (modules.js?hash=cf25b6b04018a65ac2c812e250e87f3c8b62fbc4:10928)
at invokeGuardedCallbackAndCatchFirstError (modules.js?hash=cf25b6b04018a65ac2c812e250e87f3c8b62fbc4:10942)
at executeDispatch (modules.js?hash=cf25b6b04018a65ac2c812e250e87f3c8b62fbc4:11233)
at executeDispatchesInOrder (modules.js?hash=cf25b6b04018a65ac2c812e250e87f3c8b62fbc4:11255)
at executeDispatchesAndRelease (modules.js?hash=cf25b6b04018a65ac2c812e250e87f3c8b62fbc4:11352)
at executeDispatchesAndReleaseTopLevel (modules.js?hash=cf25b6b04018a65ac2c812e250e87f3c8b62fbc4:11360)
at forEachAccumulated (modules.js?hash=cf25b6b04018a65ac2c812e250e87f3c8b62fbc4:11334)

As my code is

import React, { Component } from ‘react’;
import { Meteor } from ‘meteor/meteor’
import { User } from ‘…/api/Bots’;

export default class LoginPage extends Component {
constructor(props) {
super(props);
this.loginHandler = this.loginHandler.bind(this);
this.state = {
user:null,
error:false,
};
}

loginHandler(user){
console.log(user);
}

submitHandler(event) {
event.preventDefault();
if(Meteor.isClient) {
Meteor.subscribe(‘user’,event.target.email.value,event.target.pwd.value);
var user = User.find({}).fetch();
}
this.loginHandler(user);
}

render() {
return (



Login



<div className={!this.state.error ? “form-group” :“form-group border border-danger rounded”}>
UserName:


<div className={!this.state.error ? “form-group” :“form-group border border-danger rounded”}>
Password:


Password and User ID does"’"nt match.


Submit




);
}
}
2

Please edit your post and wrap code blocks in triple backticks like this:

```
code
goes
here
```
3

The issue is that submitHandler is called in response to an event and this hasn’t been bound to the class instance.

The solution is to bind submitHandler like you are doing with loginHandler in the constructor:

export default class LoginPage extends Component {
  constructor(props) {
    super(props);
    this.loginHandler = this.loginHandler.bind(this);
    this.submitHandler = this.submitHandler.bind(this);
    // This is the line you need            ^^^^^^^^^^
    this.state = {
      user:null,
      error:false,
    };
  }