An open-source JavaScript package known as React.js is used to create user interfaces for single-page applications. It manages the view layer for both online and mobile applications. React also enables us to make reusable UI components. Cannot read property setState of undefined in React.js is a common error in React.js. What is the cause of it and how to solve it? Read on this article.

How does the error “cannot read property setState of undefined” in React.js happen?

When we run this program:

import React, {Component} from 'react';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isActive: false,
    };
  }

  toggleIsActive() {
    // Here, `this` is unspecified
    this.setState({isActive: !this.state.isActive});
  }

  render() {
    console.log(this.state.isActive);
    return (
      <div>
        <button onClick={this.toggleIsActive}>Toggle</button>
      </div>
    );
  }
}

export default App;

We get the following error:

Cannot read property setState of undefined 

Although the toggleIsActive method has been defined, the ‘this’ keyword’s context has not yet been bound. As a result, the ‘this’ keyword’s value in the toggleIsActive method is undefined and we get this error.

How to solve the “cannot read property setState of undefined” in React.js error?

Option 1: Switch off the toggleIsActive method

To fix the error “cannot read property setState of undefined” in React.js, you have to use an arrow function rather than the toggleIsActive method. Let’s switch off it.

import React, {Component} from 'react';

class App extends Component { 
  constructor(props) { 
    super(props);

    this.state = {
      isActive: false,
    };

   }

   // It works because an arrow function is used
   // to declare the method 
   toggleIsActive = () => { 
     this.setState({isActive: !this.state.isActive}); 
   };

   render() { 
     console.log(this.state.isActive); 
     return ( 
       <div>
         <button onClick={this.toggleIsActive}>Toggle</button>
       <div>
     );
   }
}
export default App;

This solution works as because of arrow functions’ use of the ‘this’ keyword of the surrounding scope, in this case, the particular component instance.

Option 2: Utilize the ES6 arrow function

Utilizing the ES6 syntax function is a great solution for you to solve the error “cannot read property setState of undefined” in React.js. You do not need to bind the ‘this’ keyword in the constructor because it is automatically bound to that method as the following:

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

You have it now! This is how you fix the class component structure in React issue that says “this.setState” is “undefined” or “not a function”. Let’s refactor your React component to use functional components using React Hooks in order to avoid these problems in the future!

Option 3: Call the Function.bind()

Another solution for you is calling the Function.bind() method in the constructor of classes as the following example:

import React, {Component} from 'react'; 
class App extends Component { 
  constructor(props) { 
    super(props);

    this.state = {
      isActive: false,
    };

    // Here is bind method 
    this.toggleIsActive = this.toggleIsActive.bind(this);

   }

   // Works 
   toggleIsActive() { 
     // here is exactly bound 
     this.setState({isActive: !this.state.isActive}); 
   }

   render() { 
     console.log(this.state.isActive); 
     return (
       <div>
         <button onClick={this.toggleIsActive}>Toggle</button>
       <div>
     ); 
   } 
}
export default App;

The ‘this’ keyword is set to the supplied value when using the bind method to build and return a new function. The class instance is referred to using the ‘this’ keyword in the constructor. Working in classes using standard JavaScript also demonstrates this.

class Person { 
  constructor(first, last) { 
    this.first = first; 
    this.last = last; 
    console.log(this); // {first: 'James', last: 'Doe'} 
  } 
}

const p1 = new Person('James', 'Doe');

Our ability to bind the method in the constructor and use the bound version across the class is made possible by this method.

Conclusion

We hope you enjoy our article about the error. With this knowledge, we know that you can fix your error: cannot read property setState of undefined in React.js quickly by following these solutions! If you still have any other questions about fixing this syntax error, please leave a comment below. Thank you for reading!

Read more

→ The Top Effective Solutions For The Error: remote: Uncaught Error: A cross-origin error was thrown. React doesn’t have access to the actual error object in development in reactjs