Console.log() after setState() doesn’t return the updated state

by

setState() is async (React docs), so the state changes won’t be applied immediately. If you want to log out the new state,setState() takes in a function as the second argument and performs that function when the state is updated. So:

this.setState({ 
    abc: xyz 
  }, 
  () => console.log(this.state.abc),
)

Or you can also use componentDidUpdate(), which is recommended

More Related Contents:

  1. What do multiple arrow functions mean in JavaScript?
  2. Nested routes with react router v4 / v5
  3. babel-loader jsx SyntaxError: Unexpected token [duplicate]
  4. Correct use of arrow functions in React
  5. Scrollable div to stick to bottom, when outer div changes in size
  6. Multiple calls to state updater from useState in component causes multiple re-renders
  7. Removing element from array in component state
  8. Dynamically load a stylesheet with React
  9. Passing props into external stylesheet in React Native?
  10. How to allow CORS in react.js?
  11. How To Solve The React Hook Closure Issue?
  12. body data not sent in axios request
  13. redux fetch body is not use with no cors mode
  14. css position absolute making the textbox go down
  15. How is this type annotation working in React code without TypeScript?
  16. Get image preview before uploading in React
  17. How to trigger off callback after updating state in Redux?
  18. How to programmatically clear/reset React-Select?
  19. Fetch image from API
  20. ReactJs: Prevent multiple times button press
  21. How to restrict access to routes in react-router?
  22. How to detect a React component vs. a React element?
  23. Why can’t React Hooks be called inside loops or nested function?
  24. React – How to open PDF file as a href target blank
  25. Measuring text width/height without rendering
  26. How to check for broken images in React JS
  27. Why is it necessary to use bind when working with ES6 and ReactJS?
  28. useMemo vs. useEffect + useState
  29. Difference between React Component and React Element
  30. Want to have an event handler for the browser’s back button with next.js

Leave a Comment