hello world
hello world

Reputation: 1755

TypeError: Cannot read property 'bind' of undefined reactjs

I am getting a TypeError: Cannot read property 'bind' of undefined from my pushtofirebase function, even though, everything looks right to me. Would appreciate any kind of help.

Here is the code:

export default class RegisterView extends React.Component {
  constructor(props) {
    super(props);
    this.pushToFirebase = this.pushToFirebase.bind(this);

  }

  onSubmit = values => {
    var user = {
      firstName: values.fname,
      lastName: values.lname,
      email: values.email,
      password: values.password
    }

    firebase.auth().createUserWithEmailAndPassword(values.email, values.password)
      .then(function () {
        this.pushToFirebase(true);
      })
      .catch(function (error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        if (errorCode === 'auth/email-already-in-use') {
          console.log(errorMessage);
        }
        this.pushToFirebase(false);
      });

    this.pushToFirebase = status => {
      if (status) {
        const ref = firebase.database().ref('users/').push(user);
        console.log('im inside pushToFirebase');
        console.log(ref.key);
        this.props.setuserkey;
      }
    }

  }
}

I should also mention, that I am new to react, been through 3 weeks of solid react development and am still quite new.

Thank you all again for taking your time.

Upvotes: 0

Views: 647

Answers (5)

Adnan
Adnan

Reputation: 1707

Try this

 this.pushToFirebase (status) {

Hope this could be helpful for you

Upvotes: 0

Yury Tarabanko
Yury Tarabanko

Reputation: 45121

You are declaring pushToFirebase inside onSubmit. Should be

export default class RegisterView extends React.Component {

  // make it class property
  pushToFirebase = status => {
      if (status) {
        const ref = firebase.database().ref('users/').push(user);
        console.log('im inside pushToFirebase');
        console.log(ref.key);
        this.props.setuserkey;
      }
    }

  onSubmit = values => {
    var user = {
      firstName: values.fname,
      lastName: values.lname,
      email: values.email,
      password: values.password
    }

    firebase.auth().createUserWithEmailAndPassword(values.email, values.password)
      .then( () => { // Use arrow function
        this.pushToFirebase(true);
      })
      .catch( (error) => {  // Use arrow function
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        if (errorCode === 'auth/email-already-in-use') {
          console.log(errorMessage);
        }
        this.pushToFirebase(false);
      });
  }
}

Also you don't need to bind arrow function property in constructor.

UPD Also you need to replace function() handlers with arrow functions to capture this.

Upvotes: 1

illiteratewriter
illiteratewriter

Reputation: 4323

Change this.pushToFirebase = status => { to just pushToFirebase = status => and move the function to outside of the onSubmit function.

And since it is an arrow function you don't have to do this.pushToFirebase = this.pushToFirebase.bind(this); this line you can remove it

So it should look something like

export default class RegisterView extends React.Component {
 constructor(props) {
  super(props);

 }
 pushToFirebase = status => {
   if (status) {
     const ref = firebase.database().ref('users/').push(user);
     console.log('im inside pushToFirebase');
     console.log(ref.key);
     this.props.setuserkey;
   }
 }

Upvotes: 0

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

TypeError: Cannot read property 'bind' of undefined pushtofirebase

The function defination for pushtofirebase is missing.

So,there is no property with this name associated with this object.Its cause this exception.

Upvotes: 0

devserkan
devserkan

Reputation: 17598

Omit this from your function definition. Instead of:

this.pushToFirebase = status => {

Use:

pushToFirebase = status => {

and move it into your class instead of onSubmit function.

Also, you don't have to bind your function in constructor since you are using an arrow function here.

Upvotes: 0

Related Questions