Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / NewStats: 3,209,536 members, 8,006,412 topics. Date: Tuesday, 19 November 2024 at 01:31 AM |
Nairaland Forum / Science/Technology / Programming / Help On My React Project (862 Views)
Help Needed On React Project / My New React Project / My React Single Page For Small Start Up Business (Request Web App - No Backend ) (2) (3) (4)
Help On My React Project by Laryfrosh: 11:06am On Jul 08, 2022 |
Good Morning Devs I have been trying to build my first project on react (a mini e-commerce app) and I am currently faced with a challenge which I have been trying to resolve for over 2 weeks now. My challenge is summing up the total on the cart after pushing the items to the cart. Here is the link to code on GitHub. https://github.com/Hilary017/hillsMart Please I will be glad if anyone can assist me on how I can implement this. Thanks |
Re: Help On My React Project by jbreezy: 11:12am On Jul 08, 2022 |
Laryfrosh:Get them in an array, and use the .reduce() method. It will sum every prices inside the array for you. |
Re: Help On My React Project by Laryfrosh: 11:19am On Jul 08, 2022 |
jbreezy: I have tried that but I couldn't get them in an array. Guess that has got something to do with the structure of the code but I have not been able to figure out a better way to implement it... Please, can you kindly take a look at the code? |
Re: Help On My React Project by Nobody: 11:21am On Jul 08, 2022 |
Array.reduce should help you. Example. let numbers = [1, 2, 3]; let sum = numbers.reduce(function (previousValue, currentValue) { return previousValue + currentValue; }); console.log(sum); But I'm assuming your cart item object also has a quantity. So you wanna sum up all the Cart item quantities using array.reduce() For easy readability you may want to also save that in a state. |
Re: Help On My React Project by Extratyre01(m): 11:28am On Jul 08, 2022 |
Laryfrosh: Try to mail me here |
Re: Help On My React Project by jbreezy: 11:44am On Jul 08, 2022 |
Laryfrosh:Screenshot and let me take a look. |
Re: Help On My React Project by Laryfrosh: 11:59am On Jul 08, 2022 |
jbreezy: The files are kinda much... I can send the GitHub link |
Re: Help On My React Project by jbreezy: 12:01pm On Jul 08, 2022 |
Laryfrosh:Just the part you used the reduce() method. |
Re: Help On My React Project by Laryfrosh: 12:38pm On Jul 08, 2022 |
jbreezy: This is where my problem is... I have not been able to arrange the individual total into an array |
Re: Help On My React Project by chukwuebuka65(m): 1:05pm On Jul 08, 2022 |
Laryfrosh: updated: u need array that contains ur individual item price total in ur usecontext. Const [totalcartprice, setTotalcartprice] = useState([]) Then below ur ( const total = props.price * quantity) Do this: setTotalprice( prices => [•••prices, total] ) Totalcartprice now contains an array of all ur individual total prices. Goodluck |
Re: Help On My React Project by Nobody: 1:42pm On Jul 08, 2022 |
Laryfrosh: Hmm op, be like we're working on the same project, did you get the project from frontend mentors ?
|
Re: Help On My React Project by Laryfrosh: 7:51pm On Jul 08, 2022 |
chukwuebuka65: Thanks... I will try it out |
Re: Help On My React Project by Laryfrosh: 7:52pm On Jul 08, 2022 |
Think4Myself: No o... I just brought this one up from my head... LoL |
Re: Help On My React Project by ahmedsaniadamu(m): 11:00pm On Jul 08, 2022 |
hope your products are array of objects?
if so then e.g products = [
{ name:"", price : 20 },
{ name:"", price : 50 },
{ name:"", price : 80 }
] const total = product.reduce ( ( product , initialValue ) => { return product.price + initialValue } , 0 //initial value. ) console.log( total) // = 150 1 Like |
Re: Help On My React Project by Phantaminum1(f): 7:27am On Jul 09, 2022 |
Laryfrosh:I just checked your totalCost state and it is empty. Or send the link to the file you want implement the total price. I just finished a similar project, do I might be able to help. 1 Like |
(1) (Reply)
File Attachements Help / Xss Hole Is Not A Threat To A Language Is A Threat To All, Cross Site Scripting. / I Need Help With This Code.
(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. 29 |