Cannot read property 'state' of undefined

Question

I'm trying to get the values from the input in the button click but when I click the error appears: Cannot read property 'state' of undefined.

This my code, in authentication function this.state returns: Cannot read property 'state' of undefined.

constructor(props) {
  super(props);
  this.state = {
    email: '',
    pass: ''
  }
}

handleChange (event) {
  this.setState({
    [event.target.name]: event.target.value
  })
}

authentication() {
 console.log(this.state);
}

render() {
        return (
            <Fragment>
                <LoginStyles />
                <main>
                    <section>
                        <h2 className="title">Login</h2>

                        <div className="form__login">
                            <label>Nome:</label>
                            <input type="text" name="email" onChange={event => this.handleChange(event)} />

                            <label>Senha:</label>
                            <input type="password" name="pass" onChange={event => this.handleChange(event)} />

                            <button className="btn-default" onClick={this.authentication}>Acessar</button>
                        </div>
                    </section>
                </main>
            </Fragment> 
        )
    }

https://stackoverflow.com/questions/29577977/unable-to-access-react-instance-this-inside-event-handler — , Jan 14 '19 at 12:38
Or: bind it once in the constructor rather than on every render. — Andy, Jan 14 '19 at 12:39
Use if ( typeof variable == "Number" | "String" | "Object" ) to validate variable before use if there is a chance it could be undefined. — SPlatten, Jan 14 '19 at 12:40

score 3 · Accepted Answer · edited Jan 14 '19 at 12:40

3

You should bind your authentication function as well as handleChange function. To do that you can either use bind method in constructor or use ES6 arrow operator as below-

handleChange = (event) => {
  this.setState({
    [event.target.name]: event.target.value
  })
}

authentication = () => {
 console.log(this.state);
}

edited Jan 14 '19 at 12:40

Pawan Gangwani

182
8

answered Jan 14 '19 at 12:37

techie_questie

1,434
4
29
53

score 0 · Answer 2 · answered Jan 14 '19 at 12:39

0

As someone already mentioned, you have to bind the method in the constructor or in the onClick as he did

Here is a link to Handling Events in React

answered Jan 14 '19 at 12:39

twcardenas

115
2
10

Cannot read property 'state' of undefined

2 Answers2

Linked

Related