Why can’t I update props in react.js?

by

The React philosophy is that props should be immutable and top-down. This means that a parent can send whatever prop values it likes to a child, but the child cannot modify its own props. What you do is react to the incoming props and then, if you want to, modify your child’s state based on incoming props.

So you don’t ever update your own props, or a parent’s props. Ever. You only ever update your own state, and react to prop values you are given by parent.

If you want to have an action occur on a child which modifies something on the state, then what you do is pass a callback to the child which it can execute upon the given action. This callback can then modify the parent’s state, which in turns can then send different props to the child on re-render.

More Related Contents:

  1. Nested routes with react router v4 / v5
  2. React useEffect in depth / use of useEffect?
  3. Is useState synchronous? [duplicate]
  4. ReactJS call parent method
  5. Await is a reserved word error inside async function
  6. Multiple calls to state updater from useState in component causes multiple re-renders
  7. Removing element from array in component state
  8. React: how to load and render external html file?
  9. Binding vs Arrow-function (in JavaScript, or for react onClick)
  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. Can’t resolve module (not found) in React.js
  16. React-router v4 – cannot GET *url*
  17. Get image preview before uploading in React
  18. Why I receive blank page? React
  19. How to restrict access to routes in react-router?
  20. React – How to open PDF file as a href target blank
  21. How to check for broken images in React JS
  22. Why is it necessary to use bind when working with ES6 and ReactJS?
  23. Bootstrap modal in React.js
  24. TypeError dispatcher.useState is not a function when using React Hooks
  25. UseEffect being called multiple times
  26. How to Access styles from React?
  27. Is it possible to pass context into a component instantiated with ReactDOM.render?
  28. Firebase-Admin, importing it to react application throws Module not found error
  29. How to prevent Next.js from instantiating a singleton class/object multiple times?
  30. How to dynamically import SVG and render it inline

Leave a Comment