React - uncaught TypeError Cannot read property setState of undefined

Question

I am getting the following error     Uncaught TypeError  Cannot read property  setState  of undefined   even after binding delta in the constructor   class Counter extends React Component       constructor props            super props            this state                 count   1                     this delta bind this              delta             this setState               count   this state count                          render             return                lt div gt                   lt h1 gt  this state count  lt  h1 gt                   lt button onClick  this delta  gt   lt  button gt               lt  div gt

User · Answer

Just change your bind statement from what you have to         this delta   this delta bind this

User · Answer

you have to bind new event with this keyword as i mention below     class Counter extends React Component       constructor props            super props            this state                 count   1                     this delta   this delta bind this              delta             this setState               count   this state count                          render             return                lt div gt                   lt h1 gt  this state count  lt  h1 gt                   lt button onClick  this delta  gt   lt  button gt               lt  div gt

User · Answer

There are two solutions of this issue   The first solution is add a constructor to your component and bind your function like bellow   constructor props            super props                         this delta   this delta bind this           So do this   this delta   this delta bind this      Instead of this   this delta bind this     The second solution is to use an arrow function instead   delta        gt           this setState              count   this state count                    Actually arrow function DOES NOT bind it   s own this  Arrow Functions lexically bind their context so this actually refers to the originating context   For more information about bind function   Bind function Understanding JavaScript Bind     For more information about arrow function   Javascript ES6     Arrow Functions and Lexical this

User · Answer

lt  DOCTYPE html gt   lt html gt     lt head gt       lt meta charset  UTF-8    gt       lt title gt Hello World lt  title gt        lt script src  https   unpkg com react 0 14 8 dist react min js  gt  lt  script gt       lt script src  https   unpkg com react-dom 0 14 8 dist react-dom min js  gt  lt  script gt       lt script src  https   unpkg com babel-standalone 6 15 0 babel min js  gt  lt  script gt      lt  head gt     lt body gt     lt div id  root  gt  lt  div gt       lt script type  text babel  gt           class App extends React Component               constructor props                   super props                   this state                         counter   0                      isToggle  false                               this onEventHandler   this onEventHandler bind this                                 increment       gt                   this setState  counter this state counter   1                               decrement      gt                   if this state counter  gt  0                    this setState  counter this state counter - 1                         else                  this setState  counter 0                                                                Either do it as onEventHandler        gt     with binding with this     object               onEventHandler                    this setState  isToggle  this state isToggle                   alert  Hello                                render                    return                       lt div gt                           lt button onClick  this increment  gt  Increment  lt  button gt                           lt button onClick  this decrement  gt  Decrement  lt  button gt                           this state counter                           lt button onClick  this onEventHandler  gt   this state isToggle    Hi   Ajay    lt  button gt                        lt  div gt                                                        ReactDOM render           lt App  gt           document getElementById  root                  lt  script gt     lt  body gt     lt  html gt

User · Answer

You dont have to bind anything  Just use Arrow functions like this    class Counter extends React Component       constructor props            super props            this state                 count  1                         ARROW FUNCTION     delta        gt            this setState               count  this state count                          render             return                lt div gt                   lt h1 gt  this state count  lt  h1 gt                   lt button onClick  this delta  gt   lt  button gt               lt  div gt

User · Answer

though this question had a solution already  I just want to share mine to make it be cleared  hope it could help          The root cause is method doesn t in the App s context     so that it can t access other attributes of  this      Below are few ways to define App s method property     class App extends React Component     constructor          this sayHi    hello           create method inside constructor  context   this      this method       gt     console log this sayHi              bind method1 in constructor into context  this       this method1   this method bind this            method1 was defined here   method1           console log this sayHi             create method property by arrow function  I recommend this    method2        gt          console log this sayHi          render

User · Answer

Arrow function could have make your life more easier to avoid binding this keyword  Like so    delta        gt           this setState              count   this state count

User · Answer

When using ES6 code in React always use arrow functions  because the this context is automatically binded with it  Use this    videos    gt        this setState   videos  videos         console log this state videos        instead of   function videos        this setState   videos  videos         console log this state videos

User · Answer

This is due to this delta not being bound to this   In order to bind set this delta   this delta bind this  in the constructor   constructor props        super props        this state             count   1             this delta   this delta bind this       Currently  you are calling bind  But bind returns a bound function  You need to set the function to its bound value

User · Answer

Check state           check state whether you create particular property or not     x000D   x000D  this state     x000D              name      x000D              email     x000D                x000D               x000D              x000D               x000D  this setState      gt      x000D               comments  comments            comments not available in state x000D                    x000D   x000D   x000D    2 Check the  this                if you doing setState inside any function  i e handleChange  check whether the function bind to this  or the function should be arrow function       3 ways for binding this to the below function     x000D   x000D    3 ways for binding this to the below function x000D   x000D  handleNameChange e      x000D       this setState      gt     name     x000D        x000D       x000D     1 Bind while callling function x000D        onChange  this handleNameChange bind this   x000D         x000D         x000D    2 make it as arrow function x000D       handleNameChange  e   gt      x000D       this setState      gt     name     x000D          x000D       x000D    3 Bind in constuctor  x000D   x000D  constructor props    x000D          super props  x000D          this state     x000D              name      x000D              email     x000D            x000D          this handleNameChange   this handleNameChange bind this  x000D            x000D   x000D   x000D

User · Answer

You need to bind this to the constructor and remember that changes to constructor needs restarting the server  Or else  you will end with the same error

User · Answer

You have to bind your methods with  this   default object   So whatever your function may be just bind that in the constructor   constructor props        super props       this state     checked false         this handleChecked   this handleChecked bind this      handleChecked        this setState           checked    this state checked            render        var msg       if this state checked           msg    checked            else          msg    not checked             return            lt div gt                              lt input type  checkbox  defaultChecked    this state checked  onChange    this handleChecked    gt               lt h3 gt This is  msg  lt  h3 gt           lt  div gt

User · Answer

There is a difference of context between ES5 and ES6 class  So  there will be a little difference between the implementations as well   Here is the ES5 version   var Counter   React createClass       getInitialState  function     return   count   1           delta  function             this setState               count   this state count                          render  function             return                lt div gt                 lt h1 gt  this state count  lt  h1 gt                 lt button onClick  this delta  gt   lt  button gt               lt  div gt                               and here is the ES6 version   class Counter extends React Component       constructor props            super props           this state     count   1               delta             this setState               count   this state count                          render             return                lt div gt                 lt h1 gt  this state count  lt  h1 gt                 lt button onClick  this delta bind this   gt   lt  button gt               lt  div gt                             Just be careful  beside the syntax difference in the class implementation  there is a difference in the event handler binding    In the ES5 version  it s                 lt button onClick  this delta  gt   lt  button gt    In the ES6 version  it s                  lt button onClick  this delta bind this   gt   lt  button gt

User · Answer

Adding      onClick  this delta bind this     will solve the problem   this error comes when we try to call the function of ES6 class   So we need to bind the method

User · Answer

In ES7   ES2016  you can use the experimental function bind syntax operator    to bind  It is a syntactic sugar and will do the same as Davin Tryon s answer  You can then rewrite this delta   this delta bind this   to this delta     this delta   For ES6   ES2015  you can also use the ES6  arrow function    gt   to be able to use this  delta        gt        this setState           count   this state count   1            Why   From the Mozilla doc    Until arrow functions  every new function defined its own this value        This proved to be annoying with an object-oriented style of programming  Arrow functions capture the this value of the enclosing context

User · Answer

You can also use    lt button onClick      gt this delta    gt   lt  button gt    Or     lt button onClick  event  gt this delta event   gt   lt  button gt    If you are passing some params

User · Answer

if your are using ES5 syntax then you need to bind it properly  this delta   this delta bind this    and if you are using ES6 and above you can use arrow function  then you don t need to use bind   it   delta        gt           do something

User · Answer

This error can be resolved by various methods-    If you are using ES5 syntax  then as per React js Documentation you  have to use bind method   Something like this for the above example    this delta   this delta bind this  If you are using ES6 syntax then you need not use bind method you can  do it with something like this   delta     gt       this setState           count   this state count

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

Examples related to javascript

Examples related to reactjs