Does the “This setstate is not a function” error bug you incessantly? Then you have come to the right place. This guideline covers everything you need! This article will define such an error, delve further into its roots, and suggest possible solutions for you.

What Is The “This Setstate is Not A Function” Error? 

It is a common error in React, especially when you use class-based components. To understand it better, let’s look at the following codes:

import React, { Component } from "react"
import "./App.css"
export default class App extends Component {
 constructor(props) {
   super(props)
   this.state = { counter: 0 }
 }

 updateCounter() {
   this.setState({ counter: this.state.counter + 1 })
 }

 render() {
   return (
     <div className="App">
       <button onClick={this.updateCounter}>
         Clicked {this.state.counter} Times
       </button>
     </div>
   )
 }
}

When you perform a quick code scan, you often assume the code will work well. However, in reality, once you operate the code before clicking the buttons, nothing will happen. Instead, upon browser console checking, this error will pop up:

Uncaught TypeError: Cannot read properties of undefined (reading 'setState') 
at updateCounter (bundle.js:34:10) 
at HTMLUnknownElement.callCallback (bundle.js:11297:18) 
at Object.invokeGuardedCallbackDev (bundle.js:11346:20) 
at invokeGuardedCallback (bundle.js:11406:35) 
at invokeGuardedCallbackAndCatchFirstError (bundle.js:11421:29) 
at executeDispatch (bundle.js:15656:7) 
at processDispatchQueueItems InOrder (bundle.js:15688:11) 
at processDispatchQueue (bundle.js:15701:9) 
at dispatchEvents ForPlugins (bundle.js:15712:7) at bundle.js:15923:16

(In some rarer cases, this error might also pop up: “TypeError: Cannot read property ‘location’ of undefined”. Fortunately, ITTutoria has already taken care of this issue, whose instructions may be found here!

Why Does It Happen?

Why does this error occur? It is because there is a “Closures” concept in JavaScript. And what does this concept entail? It implies that the function context/scope and your class Application are not similar. That means the “updateCounter” and the “App” share different “this”.

In the example above, we tried to enter “this” from the “App” category inside the functions. The latter have their unique “this”, which remains undefined now. That is why the error happens.

How to Tackle This Error?

Now let’s look at another code with this same error:

<div style={{
    padding: '5px'
}}

onClick={this.handleClick}>

When you write the “this.handleClick” function, “this” turns out to refer to <div> rather than the class component (the one that receives all the class functions). Once the system creates the component, that “handleClick” operation you already defined will run after firing the “click” occurrence. Now, let’s look at the codes within “handleClick”:

handleClick() {
  this.setState({
      value: 2
  });
}

Your component will have to yield the code line: 

this.setState({
  value: 2
});

Your component establishes a line without knowing what “this.setState” even means! Indeed, the <div> element that sets the “click” occurrence does not know how to locate “this.setState”.

So where can you find it then? The “setState” belongs to the “React.Component” category. Now, we will revisit some “Element.js” codes:

class Element extends Component {
  constructor ( props ) {
      super( props );
      this.state = {
          value: 1
      };
  }

So to tackle the problem, all you need to do now is rewrite the “Element.js” component:

import { Component, setState } from "react";
class Element extends Component {
constructor ( props ) {
        super( props );
        this.state = {
            value: 1
        };
    }

    handleClick() {
        this.setState({
            value: 2
        });
    }

    render () {
        return (
            <div style={{
                padding: '5px'
            }}

            onClick={this.handleClick.bind(this)}>
                Value is: {this.state.value}
            </div>
        )
    }
}
export { Element }

Conclusion

This article has shown you how to tackle the “This Setstate is Not A Function” error. Write to ITTutoria if certain facets still trouble you. We will do our best to help tackle your issues!