Shopping cart
Answered
Narrow-barred Spanish mackerel posted this in #help-forum
Narrow-barred Spanish mackerelOP
Hey there, I'm pretty newbie to nextjs/react and I'm trying to do a simple web about clothes.
I have a component called <Cart />, a component called <ProductsList /> and a component called <Product />, what I'm trying to do it's whenever I click on the <Product /> component in a specific button, add that product to the <Cart /> component, I've been digging around but couldn't get it done.
Any tips on how should I do it? context? Thanks!
I have a component called <Cart />, a component called <ProductsList /> and a component called <Product />, what I'm trying to do it's whenever I click on the <Product /> component in a specific button, add that product to the <Cart /> component, I've been digging around but couldn't get it done.
Any tips on how should I do it? context? Thanks!
18 Replies
@Narrow-barred Spanish mackerel Hey there, I'm pretty newbie to nextjs/react and I'm trying to do a simple web about clothes.
I have a component called <Cart />, a component called <ProductsList /> and a component called <Product />, what I'm trying to do it's whenever I click on the <Product /> component in a specific button, add that product to the <Cart /> component, I've been digging around but couldn't get it done.
Any tips on how should I do it? context? Thanks!
Dunker
do you have database, backend or can you build or do you want to build
@Dunker do you have database, backend or can you build or do you want to build
Narrow-barred Spanish mackerelOP
I'm using an external API with dummy products
@Narrow-barred Spanish mackerel I'm using an external API with dummy products
Dunker
hmm then you need to global state manager
@Dunker hmm then you need to global state manager
Narrow-barred Spanish mackerelOP
Any documentation, tip or showcase on how it might work?
Dunker
redux, zustand
Answer
Dunker
but it d be heavy for beginners
Narrow-barred Spanish mackerelOP
I'll take a look
Thanks!
Dunker
also there is context as react concept
maybe it could be better solution, as you are using same data in many components
Narrow-barred Spanish mackerelOP
Context will work better then?
Dunker
you ll have a state like
const product, setProduct = useState({..., isSold: false})
<button onClick={() => setProduct((p -> {...p, isSold: true}))
const product, setProduct = useState({..., isSold: false})
<button onClick={() => setProduct((p -> {...p, isSold: true}))
for small scale, yes
Narrow-barred Spanish mackerelOP
Right
Dunker
but in all ways, i recommend learning redux
Narrow-barred Spanish mackerelOP
Alright, thanks!
Dunker
redux-toolkit one, not old one
gl