TypeError: Cannot read property state of undefined

3 ways not to see ?TypeError: Cannot read property ?state? of undefined? error.

I wanted to make clear about it when I took a course. Today is the day! I also looked into error case in detail.

Before :

1. console.log(this.state.term)

class SearchBar extends React.Component { state = { term: ” }; onFormSubmit(event) { event.preventDefault(); //What is ‘preventDefault’ console.log(‘onFormSubmit : ‘, this.state.term); }render() { console.log(‘SearchBar this.state’, this) return ( <div className=”ui segment”> <form onSubmit={this.onFormSubmit} className=”ui form”> <div className=”field”> <label>Image Search</label> <input type=”text” value={this.state.term} onChange={(e) => this.setState({ term: e.target.value})} /> </div> </form> </div> )}

I have confronted this error below many time.

It means that this.state is ?undefined?, therefore I just put ?this.state? on console.log and check what comes out.

2. console.log(this.state)

onFormSubmit(event) { event.preventDefault(); //What is ‘preventDefault’ console.log(‘onFormSubmit : ‘, this.state); }

Same error came out, so I put only ?this? on console.log and checked out.

3. console.log(this)

onFormSubmit(event) { event.preventDefault(); //What is ‘preventDefault’ console.log(‘onFormSubmit : ‘, this); }

Now ?undefined? came out! It was supposed to be instance of SearchBar class!

After :

1. constructor, this.bind

class SearchBar extends React.Component { constructor(props) { super(props) this.state = { term: ”} this.onFormSubmit = this.onFormSubmit.bind(this) }onFormSubmit(event) { event.preventDefault(); //What is ‘preventDefault’ console.log(‘onFormSubmit : ‘, this); }render() { console.log(‘SearchBar this.state’, this) return ( <div className=”ui segment”> <form onSubmit={this.onFormSubmit} className=”ui form”> <div className=”field”> <label>Image Search</label> <input type=”text” value={this.state.term} onChange={(e) => this.setState({ term: e.target.value})} /> </div> </form> </div> )}

Now I can see an instance of SearchBar class.

2. arrow function expression(ES6)

class SearchBar extends React.Component { constructor(props) { super(props) this.state = { term: ”} this.onFormSubmit = this.onFormSubmit.bind(this) }onFormSubmit = (event) => { event.preventDefault(); //What is ‘preventDefault’ console.log(‘onFormSubmit : ‘, this); }render() { console.log(‘SearchBar this.state’, this) return ( <div className=”ui segment”> <form onSubmit={this.onFormSubmit} className=”ui form”> <div className=”field”> <label>Image Search</label> <input type=”text” value={this.state.term} onChange={(e) => this.setState({ term: e.target.value})} /> </div> </form> </div> )}

Again the instance of SearchBar class!

3. arrow function when rendering

class SearchBar extends React.Component { constructor(props) { super(props) this.state = { term: ”} this.onFormSubmit = this.onFormSubmit.bind(this) }onFormSubmit(event) { event.preventDefault(); //What is ‘preventDefault’ console.log(‘onFormSubmit : ‘, this); }render() { console.log(‘SearchBar this.state’, this) return ( <div className=”ui segment”> <form onSubmit={(e) => this.onFormSubmit(e)} className=”ui form” > <div className=”field”> <label>Image Search</label> <input type=”text” value={this.state.term} onChange={(e) => this.setState({ term: e.target.value})} /> </div> </form> </div> )}

Reference :

1. https://reactjs.org/docs/handling-events.html
2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
3. https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/
4. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind
5. Modern React with Redux by Stephen Grider

I am blogging what I?ve learned to find later here for myself. If you happened to read this shit and there is wrong information, it would be appreciated to add a comment below.