How map with function and text ReactJs

Question

I would like to explain my problem of the day.

currently i map, everything works correctly

my problem and that I wish I could create a div in it in order to display the result of total , unfortunately I can't

Do you have an idea of how to fix this?

 {this.props.items.map(item => { 
 const product = this.props.items;
 let total = 0;

 console.log(total)
 console.log('yolo',product)
 console.log('yolo array',product[0].quantity)

for (let i = 0 ; i<product.length;i++){
console.log('products',product[i].quantity) 
total = total + product[i].quantity;                        
}
} 
)}

Does this answer your question? stackoverflow.com/questions/1230233/… — keikai
– keikai, Commented Mar 6, 2020 at 10:46

Francesco Di Stefano · Accepted Answer · 2020-03-06 10:40:41Z

1

even if you were to render something using total, with this method you would render a "total item" for each item in props.items. What you want to use here is the reduce method. Here is an example with a very basic div, but you can decide what to render in place of it

<div>
{this.props.items.reduce((total,item) => item.quantity + total, 0)}
</div>

What the reduce methos does is returning a single value from a list of elements. The second parameter is your initial value, while he first is the callback that will be executed at each iteration

answered Mar 6, 2020 at 10:40

Francesco Di Stefano

1211 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How map with function and text ReactJs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related