Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,151,589 members, 7,812,914 topics. Date: Monday, 29 April 2024 at 10:24 PM

Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) - Programming (3) - Nairaland

Nairaland Forum / Science/Technology / Programming / Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) (1325 Views)

Redux RTK Vs React Query For Fetching Data And Inifiite Scroll / Guys, I Need Help With This Reactjs Issue Please. / If You Are Good With React Hooks And Context API (2) (3) (4)

(1) (2) (3) (Reply) (Go Down)

Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by truthCoder: 2:46pm On Jan 19, 2023
Devdevdev:


Yea

cartItem.amount was undefined because it was not existing at initial state.

It was not existent because cartItems didn’t have an amount parameter in the objects.

You also called {amount} instead of {product.amount}. This was rightly pointed out by GIM above.

Defining amount in your objects would remove the need for ||0
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by truthCoder2: 2:48pm On Jan 19, 2023
truthCoder:


cartItem.amount was undefined because it was not existing at initial state.

It was not existent because cartItems didn’t have an amount parameter in the objects.

You also called {amount} instead of {product.amount}. This was rightly pointed out by GIM above.

Defining amount in your objects would remove the need for ||0
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by qtguru(m): 2:58pm On Jan 19, 2023
truthCoder:


cartItem.amount was undefined because it was not existing at initial state.

It was not existent because cartItems didn’t have an amount parameter in the objects.

You also called {amount} instead of {product.amount}. This was rightly pointed out by GIM above.

Defining amount in your objects would remove the need for ||0

Yeah that's right it's undefined
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by qtguru(m): 3:06pm On Jan 19, 2023
I don't understand the logic behind your code,

If you want to add to Cart, why not create an empty array, and only add when a payload matches, I will do it and share a video soon.
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by truthCoder2: 3:13pm On Jan 19, 2023
Sveltekit would handle this way easier and differently.

You can make any thing reactive in less codes than this encyclopedia.
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by qtguru(m): 3:14pm On Jan 19, 2023
Fixed recording video to explain now
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by qtguru(m): 3:27pm On Jan 19, 2023
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by truthCoder2: 3:42pm On Jan 19, 2023
qtguru:
https://www.awesomescreenshot.com/video/14118494?key=df68f2ca751874275c8dd538ddec1050

Please what OS are you using?

I can see Mac OS-like buttons and a windows-lke tray

Edit:
Your solution is better.

Refines the code and updates both the cart and the button.
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by qtguru(m): 3:46pm On Jan 19, 2023
truthCoder2:


Please what OS are you using?

I can see Mac OS-like buttons and a windows-lke tray

KUbuntu KDE Plasma but i downloaded a style called breeze, it has that mac-os feel

2 Likes

Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by qtguru(m): 4:11pm On Jan 19, 2023
@devdevdev how do I send the code, or is the video enough ?

1 Like

Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by Devdevdev(f): 4:28pm On Jan 19, 2023
qtguru:
@devdevdev how do I send the code, or is the video enough ?

The videos is enough. Thank you so much

You have a nice voice.
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by Nobody: 4:54pm On Jan 19, 2023
Devdevdev:


This worked. Thanks a lot. It wasn't clicking because the amount was set to zero so adding the product.amount || 0 and telling the compiler to add 1 when the state is 0 or when there is an amount, did the trick.

I also included the modification to the redux code and it worked.

This wasn't the reason why it didn't work.

Your product object didn't have any amount in it in the first place.
(Items in ShopProducts Array)

Even if you remove the amount: in the initialState object, the updated code will still run as expected.
The amount in initialState remains same as you're not doing anything to it.



Instead in the reducer in the updated code.

In the .map() method that's where a new product.amount was created.

Then since it wasn't in existence we set it to 0 if it now exist we set it to the actual product.amount then add 1

That's why u saw product.amount||0

That is, if(product.amount exist, add one to it)
If(it doesn't exist/null/undefined) set it to 0 then and 1 to it on click.

Try checking out what truthcoder commented.

Also, would it not be better to rename amount to quantity since it's the product quantity you're increasing in the cart?
Re: Please I Need Help With This Reactjs Issue - Context Api & RTK (pictures) by qtguru(m): 4:58pm On Jan 19, 2023
Devdevdev:


The videos is enough. Thank you so much

You have a nice voice.

Appreciate smiley

2 Likes

(1) (2) (3) (Reply)

Mobile Learning / Connecting My Dreamweaver Site To Mysql Database / I Need A Customized Automated Traffic Bot With My Specification

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 15
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.