The worm The worm - 9 days ago 7
React JSX Question

Why does my function not recognise my other function in react?

Why do I get the error:

Uncaught ReferenceError: writeUserData is not defined(…)


or the other error when i include
this.writeUserData
which is:
Cannot read property 'writeUserData' of undefined


The function still posts the correct data to firebase so why is it complaining?
and more so what is the correct way to call a function inside another function. i thought this was the right way to do it?

signUserUp(){
let name = this.state.nameValue;
let slackName = this.state.slackNameValue;
let email = this.state.emailValue;
let password = this.state.passwordValue;
firebase.auth().createUserWithEmailAndPassword(email, password).then(
function(result){
writeUserData(name, result.uid, email, slackName);
},
function(error){
let errorCode = error.code;
let errorMessage = error.message;
console.log(errorMessage, '***');
console.log(errorCode, 'code');
});
};

writeUserData(name, useruid, email, slackName){
firebase.database().ref('/pairs/' + useruid).set({
name: name,
useruid: useruid,
email: email,
slackName: slackName
});
}


EDIT: This code is inside a React component using ES6 syntax...

Answer

For you first question: The reason is that you didn't declare writeUserData as a function.

Here is a way similar to Alexey Soshin's answer, but with an alternative syntax.

var signUserUp = function() {
    let name = this.state.nameValue;
    let slackName = this.state.slackNameValue;
    let email = this.state.emailValue;
    let password = this.state.passwordValue;

    firebase.auth().createUserWithEmailAndPassword(email, password).then(
    function(result){
        writeUserData(name, result.uid, email, slackName);
    },
    function(error){
        let errorCode = error.code;
        let errorMessage = error.message;
        console.log(errorMessage, '***');
        console.log(errorCode, 'code');
    });
};

var writeUserData = function (name, useruid, email, slackName) {
    firebase.database().ref('/pairs/' + useruid).set({
        name: name,
        useruid: useruid,
        email: email,
        slackName: slackName
    });
}

For your second question ("...when I include this.writeUserData ... Cannot read property 'writeUserData' of undefined"): In this case this is undefined.

To define this for your second question, you'd have to define your writeUserData inside this.

To define writeUserData inside this:

  1. add it on the prototype of the parent function

    signUserUp.prototype.writeUserData = function(name, useruid, email, slackName) { ... }
    
  2. bind the this of the parent function to the child function

    firebase.auth().createUserWithEmailAndPassword(email, password).then( ... ).bind(this);
    
  3. bind the this of the child function to your function

    function(result) { ... }.bind(this),
    

... which is awkward. So do it the first way! :)

var signUserUp = function() {
  let name = this.state.nameValue;
  let slackName = this.state.slackNameValue;
  let email = this.state.emailValue;
  let password = this.state.passwordValue;

  signUserUp.prototype.writeUserData = function(name, useruid, email, slackName) {
    firebase.database().ref('/pairs/' + useruid).set({
      name: name,
      useruid: useruid,
      email: email,
      slackName: slackName
    });
  }

  firebase.auth().createUserWithEmailAndPassword(email, password).then(
    function(result) {
      this.writeUserData(name, result.uid, email, slackName);
    }.bind(this),
    function(error) {
      let errorCode = error.code;
      let errorMessage = error.message;
      console.log(errorMessage, '***');
      console.log(errorCode, 'code');
    }).bind(this);
};

Comments