Having trouble accessing the `controls` property of an undefined variable in a function() implementation

Question

Having trouble accessing the `controls` property of an undefined variable in a function() implementation

I'm struggling to understand why my authHandler function is returning the error "cannot read property 'controls' of undefined" even though I have defined it. At least, I believe I have - see below.

Any fresh perspectives on this issue would be greatly appreciated!

class SignUp extends Component {
    state = {
        controls: {
            email: {
                value: "",
                valid: false,
                validationRules: {
                    isEmail: true
                },
                touched: false
            },
            password: {
                value: "",
                valid: false,
                validationRules: {
                    minLength: 6
                },
                touched: false
            }
        }
};

authHandler = () => {
    return new Promise (function(resolve, reject) {
        const authData = {
            email: this.state.controls.email.value,
            password: this.state.controls.password.value
        };
        this.props.onTryAuth(authData, this.state.authMode);
    })
    .then(() => {
        this.props.onAddUserData(
            this.state.controls.userName.value,
        )
    })
    .catch(err => {
        console.log(err);
        alert("Oops! Something went wrong, please try again")
    })
};

javascript function react-native

Answer 1

Answer №1

It is possible that you are losing the reference to the current scope, which can be verified by using console.log(this). Below is an updated code snippet that should resolve this issue. Converting the function to a lambda expression will prevent the reset of the this. Additionally, in the code you provided, there were two missing closing }.

class SignUp extends Component {
    state = {
        controls: {
            email: {
                value: "",
                valid: false,
                validationRules: {
                   isEmail: true
                },
                touched: false
            },
            password: {
                value: "",
                valid: false,
                validationRules: {
                    minLength: 6
                },
                touched: false
            }
       }
    }
};    

authHandler = () => {
    return new Promise ((resolve, reject) => {
        const authData = {
            email: this.state.controls.email.value,
            password: this.state.controls.password.value
        };
        this.props.onTryAuth(authData, this.state.authMode);
    })
    .then(() => {
        this.props.onAddUserData(
          this.state.controls.userName.value,
       )
    })
    .catch(err => {
        console.log(err);
        alert("Oops! Something went wrong, please try again")
    })
};

Alternatively, you can also approach it like this:

authHandler = () => {
    // Save a reference to 'this' for use within this function
    var self = this;
    return new Promise (function (resolve, reject) {
        // Since a function is declared above, 'this' is reset to the function's scope
        // and not the one entering authHandler.
        const authData = {
            email: self.state.controls.email.value,
            password: self.state.controls.password.value
        };
        self.props.onTryAuth(authData, self.state.authMode);
    })
    .then(() => {
        self.props.onAddUserData(
          self.state.controls.userName.value,
       )
    })
    .catch(err => {
        console.log(err);
        alert("Oops! Something went wrong, please try again")
    })
};

Answer 2

It is possible that you are losing the reference to the current scope, which can be verified by using console.log(this). Below is an updated code snippet that should resolve this issue. Converting the function to a lambda expression will prevent the reset of the this. Additionally, in the code you provided, there were two missing closing }.

class SignUp extends Component {
    state = {
        controls: {
            email: {
                value: "",
                valid: false,
                validationRules: {
                   isEmail: true
                },
                touched: false
            },
            password: {
                value: "",
                valid: false,
                validationRules: {
                    minLength: 6
                },
                touched: false
            }
       }
    }
};    

authHandler = () => {
    return new Promise ((resolve, reject) => {
        const authData = {
            email: this.state.controls.email.value,
            password: this.state.controls.password.value
        };
        this.props.onTryAuth(authData, this.state.authMode);
    })
    .then(() => {
        this.props.onAddUserData(
          this.state.controls.userName.value,
       )
    })
    .catch(err => {
        console.log(err);
        alert("Oops! Something went wrong, please try again")
    })
};

Alternatively, you can also approach it like this:

authHandler = () => {
    // Save a reference to 'this' for use within this function
    var self = this;
    return new Promise (function (resolve, reject) {
        // Since a function is declared above, 'this' is reset to the function's scope
        // and not the one entering authHandler.
        const authData = {
            email: self.state.controls.email.value,
            password: self.state.controls.password.value
        };
        self.props.onTryAuth(authData, self.state.authMode);
    })
    .then(() => {
        self.props.onAddUserData(
          self.state.controls.userName.value,
       )
    })
    .catch(err => {
        console.log(err);
        alert("Oops! Something went wrong, please try again")
    })
};

Having trouble accessing the `controls` property of an undefined variable in a function() implementation

Answer №1

Similar questions

Using Three.js to render images on several canvases with WebGLRenderer from various perspectives

Obtain a file (attachment) by utilizing an href link that includes an Authorization Header

Vue.js is prevented by Content-Security-Policy

Tips for sorting through a multi-dimensional array of objects

What is the best approach to transform a lengthy collection of 'watch' statements into a functioning solution using VueJS?

Regular expressions can be used to extract all attributes from a webpage that begin with a specified value

Integrating DHTMLX Scheduler with Node JS for seamless scheduling solutions

Access an attribute using slashes in Jquery

Access denied: Unable to rename directory '/usr/local/lib/node_modules/expo-cli' due to permission restrictions

Dealing with a Promise and converting it into an array: a step-by-step

Node.js Mongoose MongoDB causing issues with bodyparser

Unravel the base64 encoded message from JavaScript and process it in Python

Display a complex JSON string in an ng-grid

"Troubleshooting a problem with Mongoose's findOne.populate method

Creating a versatile Nuxt build that can be used across multiple environments

How can I utilize match props in React JS with the Context API?

Using JQuery to switch classes and activate events

Unable to integrate Express.js into my React JS project

Issue identified: Unforeseen SyntaxError encountered - token / was unexpected

Adaptable Semantic UI form design