React with ES7 Uncaught TypeError Cannot read property state of undefined

Question

I m getting this error Uncaught TypeError  Cannot read property  state  of undefined whenever I type anything in the input box of AuthorForm  I m using React with ES7     The error occurs on 3rd line of setAuthorState function in ManageAuthorPage  Regardless of that line of code even if I put a console log this state author  in setAuthorState  it will stop at the console log and call out the error      Can t find similar issue for someone else over the internet     Here is the ManageAuthorPage code     import React    Component   from  react    import AuthorForm from    authorForm      class ManageAuthorPage extends Component      state          author    id      firstName      lastName                  setAuthorState event         let field   event target name       let value   event target value       this state author field    value       return this setState  author  this state author               render          return           lt AuthorForm          author  this state author           onChange  this setAuthorState           gt                     export default ManageAuthorPage       And here is the AuthorForm code      import React    Component   from  react      class AuthorForm extends Component      render          return           lt form gt                    lt h1 gt Manage Author lt  h1 gt            lt label htmlFor  firstName  gt First Name lt  label gt                    lt input type  text                       name  firstName             className  form-control                       placeholder  First Name             ref  firstName             onChange  this props onChange                       value  this props author firstName               gt            lt br   gt              lt label htmlFor  lastName  gt Last Name lt  label gt                    lt input type  text                       name  lastName             className  form-control                       placeholder  Last Name             ref  lastName                       onChange  this props onChange             value  this props author lastName                         gt                      lt input type  submit  value  Save  className  btn btn-default    gt                lt  form gt                     export default AuthorForm

User · Answer

You have to bind your event handlers to correct context  this    onChange  this setAuthorState bind this

User · Answer

Make sure you re calling super   as the first thing in your constructor   You should set this for setAuthorState method  class ManageAuthorPage extends Component      state         author    id      firstName      lastName               constructor props        super props       this handleAuthorChange   this handleAuthorChange bind this           handleAuthorChange event        let  name  fieldName  value    event target       this setState          fieldName   value                 render         return          lt AuthorForm         author  this state author          onChange  this handleAuthorChange          gt                 Another alternative based on arrow function   class ManageAuthorPage extends Component      state         author    id      firstName      lastName               handleAuthorChange    event    gt        const  name  fieldName  value    event target       this setState          fieldName   value                 render         return          lt AuthorForm         author  this state author          onChange  this handleAuthorChange          gt

[javascript] React with ES7: Uncaught TypeError: Cannot read property 'state' of undefined

Examples related to javascript

Examples related to reactjs

Examples related to ecmascript-6

Examples related to ecmascript-7

Examples related to react-state