TypeError: Cannot read properties of undefined (reading 'setState')

Question

What I am trying?

Trying to set the value of input type text in state

What did I search so far?

React - uncaught TypeError: Cannot read property 'setState' of undefined

but this does not answer my issue

Error Details

TypeError: Cannot read properties of undefined (reading 'setState')

This error is coming when setting the value of email in the function setEmailVal

Component

import React from 'react';

class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {email: ""};
    }

    setEmailVal(val) {
        this.setState({email: val.currentTarget.value});
    }

    render() {
        return (
            <input type="text" onChange={this.setEmailVal} value={this.state.email} />
        );
    }    
}

export default Login;

You can try to change this.setState({email: val.currentTarget.value}); to this.setState({email: val.target.value}); — tromgy
– tromgy, Commented Oct 23, 2021 at 10:51
Does this answer your question? React - uncaught TypeError: Cannot read property 'setState' of undefined — Mayur Vaghasiya
– Mayur Vaghasiya, Commented Oct 23, 2021 at 11:20

foreverAnIntern · Accepted Answer · 2021-10-23 10:50:23Z

15

If you declare your function in the following manner

    setEmailVal = val => {
        this.setState({email: val.currentTarget.value});
    }

It works fine.

If you wish to do it in the other (old, if I am not wrong) way, then you'd need to bind the function to the class for the subcomponent, i.e. the onChange handler in the class to "see" it:

    constructor(props) {
        super(props);
        this.state = {email: ""};
        this.setEmailVal = this.setEmailVal.bind(this);
    }

Lastly, you could do a direct bind inside the return component itself

        return (
            <input type="text" onChange={this.setEmailVal.bind(this)} value={this.state.email} />
        );

answered Oct 23, 2021 at 10:50

foreverAnIntern

5011 gold badge7 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tomleb · Accepted Answer · 2021-10-23 10:52:23Z

4

You can fix this by changing setEmailVal to an arrow function.
Should look like this:

setEmailVal = e => {
   this.setState({email: e.currentTarget.value});
}

Have a look at this for more information on the subject.

answered Oct 23, 2021 at 10:52

tomleb

2,5232 gold badges12 silver badges25 bronze badges

Collectives™ on Stack Overflow

TypeError: Cannot read properties of undefined (reading 'setState')

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related