React this.state is undefined?

by

When you call {this.addUser} , it gets called, here this is an instance of your class(component), and thus it gives no error to you because addUser method does exist in your class scope,
but when you are under addUser method you are using this to update the state which exist in
the scope of class(component), but currently you are within the scope of addUser method and so it gives you an error as under addUser Scope you got nothing like state, user etc.
So to deal with this problem you need to bind this while you are calling addUser method.So that your method always knows the instance of this.

So the final change in your code will look like this:-

<Form addUser={this.addUser.bind(this)}/>

OR

You can bind this in the constructor,because it is the place when you should intialize things because constructor methods are called first when the components render to the DOM.

So you can do it in this way:-

  constructor(props) {
    super(props);
    this.state = {
        users: null
    }
    this.addUser=this.addUser.bind(this);
}

And now you can call it in normal way as you did before:-

<Form addUser={this.addUser}/>

I hope this will work,And I made it clear to You.

More Related Contents:

  1. Why calling react setState method doesn’t mutate the state immediately?
  2. When to use React setState callback
  3. How can I persist redux state tree on refresh?
  4. How to use callback with useState hook in react [duplicate]
  5. Why do the React docs recommend doing AJAX in componentDidMount, not componentWillMount?
  6. React Router v4 – How to get current route?
  7. ReactJS: Why is passing the component initial state a prop an anti-pattern?
  8. React: Expected an assignment or function call and instead saw an expression
  9. Why, exactly, do we need React.forwardRef?
  10. You should not use outside a
  11. Next.js – Error: only absolute urls are supported
  12. Installing create-react-app gives npm ERR! shasum check failed and npm ERR! Unexpected end of JSON input while parsing near ‘…mojOzGIEI2rg0m24Yb5Oq’
  13. Nested Routes not rendering with React Router v4
  14. When to use useImperativeHandle, useLayoutEffect, and useDebugValue
  15. How to use comments in React
  16. Visual studio code changes format (React-JSX)
  17. Error while creating new React app (“You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0)”)
  18. Re-initializing class on redirect
  19. ReactJs CreateClass is not a function
  20. React – TypeError: Cannot read properties of undefined (reading ‘params’)
  21. webpack can’t find module if file named jsx
  22. How should I configure create-react-app to serve app from subdirectory?
  23. react routing is able to handle different url path but tomcat returns 404 not available resources
  24. React: Why component’s constructor is called only once?
  25. React and Tailwind CSS: dynamically generated classes are not being applied
  26. Create-React-App Proxy in Production Build
  27. this.setState is undefined
  28. React stateless component this.refs..value?
  29. React: Show loading spinner while images load
  30. Media queries in Material UI components

Leave a Comment