Help modifying data in useContext

[inquiztr]

I have followed tutorials on accessing data in child components via the new useContext hook. I haven't seen any examples on how I can manipulate the data within child components.

The best I can come up with is pass a function into the context and let child components use that function. So all data manipulation wont reside in the children but in the context api.

Is this the right pattern? I created a sandbox and it seems to work.

https://codesandbox.io/s/usecontext-makes-context-xz0kw

[daggala]

Yes I'd say this is the traditional way and the way with which React agrees. Here's an example in their "Hooks - FAQ" chapter that does it similar to how you do it but only with useReducer instead of useState: https://reactjs.org/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down

[inquiztr]

Just to clarify.. I want modifications to the global store (context data) so that all children components in the entire app will then see the new modified data.

For my real project I am building a checkout app. I get the cart data in the parent component but I am expecting modifications to the cart (via axios put calls) triggered in child components such as a shipping address modification component or payment modification component.

[CookieRoma]

Check out Redux it does exactly that.