Use the React Context API to Globally Manage Cart State in a Next.js App
Using React hooks like useState makes it easy to manage things like a shopping cart, but that state may only be available one instance at a time. What if we wanted that state to be available between multiple pages?
We can take advantage of React's Context API which lets us extend our cart state by making that state available anywhere we want in the app.
In our app, we want to move the cart from the Home page component to the header which requires us to use context. We will wrap our app in a CartContext.Provider and pass in cart from our cart hook. This will allow us to grab subtotal and checkout for the Nav component.
🚨There is no video covering the creation of the Nav.js file. Make sure to review the GitHub so you don't miss that.
Is there a performance worry about using usecontext with that data that will frequently change? Doesn’t updatingcart state trigger a rerender for all items?
Is there a performance worry about using usecontext with that data that will frequently change? Doesn’t updatingcart state trigger a rerender for all items?
hey! It might be a small hit but it should be negligible, especially compared to the benefits being able to manage that state globally
i feel like there spot missing between lessons 10 and 11 we jump from no nave to saying we implemented nav with no section covering that, just a heads up
i feel like there spot missing between lessons 10 and 11 we jump from no nave to saying we implemented nav with no section covering that, just a heads up
That's was intentional, this lesson was more about showing the concept vs adding the cart to the nav
Second, what happened on Nav? Very confusing, made me go back a lesson to see if I missed it.
When I remove the cart list I am returning the following error:
Unhandled Runtime Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of Home.
Resolved the issue above. Removed a tag.
I am curious, from your code -- how were you able to import Nav from the file path you provided. Is the suffix (.js) hidden?
Returning Error As:
Unhandled Runtime Error
IntegrationError: Client-only Checkout does not support prices with usage_type=metered in items[0].
When running:
<button onClick={checkout}>
<a>🛒 ${parseFloat(subtotal).toFixed(2)} </a>
</button>Problem resolved:
Had to uncheck the 'used metered' option in the 'Product Pricing' section of Stripe.
Agreed that the Nav is confusing. Not sure why it was intentional to omit the whole creation of the components folder and structure.
The missing Nav made me confused too and I wasted time trying to find if I missed something.
I was a little upset that there are things that are just assumed like "We made this nav and you need to as well" before following along. What would be better is "before we go on, here is a challenge: Make this nav and then come back to this video". Makes the learner less confused and makes them solve a challenge as a practice.