How can I total up multiple JSX prices from inside a return()?-CodePudding

I have a component in React that recieves a cat array containing multiple objects. In each of these objects, there is a .price attribute.

What I'm hoping to do is total all of these prices up and print them once within this same component.

Here's what I tried:

const Basket = ({basket}) =>{
    return(

        <div className = "basketWrapper">
            <div className = "paymentWrapper">
            let currentTotal = 0;
                {basket.map((cat, index) => {
                    
                    currentTotal  = Math.floor(cat.price);
                    return(

                        <div className = "catsIN">
                            <h2>Cat: {cat.name}</h2>
                            <p>{cat.name} is: £{cat.price}</p>
                        </div>
                    )
                })
                    
                }
                    <div>
                        <h4>Your total is: £{currentTotal}</h4>
                    </div>               
            </div>
        </div>
    );
}

export default Basket;

However, when I run this, it returns an error that currentTotal is not defined. I get that it's outside of the map functions scope, but Im not sure how to achieve this at the moment. Just been working with react for a short while.

CodePudding user response：

Any code that you want to execute as part of your JSX should be in {} and the let currentTotal = 0; is not part of a code section.

You should calculate it before, like this:

const Basket = ({basket}) =>{
    const total = basket.reduce((prev, cur) => prev   cur.price, 0);
    return(

        <div className = "basketWrapper">
            <div className = "paymentWrapper">
                {basket.map((cat, index) => {
                    
                    currentTotal  = Math.floor(cat.price);
                    return(

                        <div className = "catsIN">
                            <h2>Cat: {cat.name}</h2>
                            <p>{cat.name} is: £{cat.price}</p>
                        </div>
                    )
                })}
                <div>
                   <h4>Your total is: £{total}</h4>
                </div>               
            </div>
        </div>
    );
}

export default Basket;

CodePudding user response：

Your code is never actually setting the currentTotal variable as it is in your dom.

Also, I would use the reduce function to tally up the total price, here are the changes to the code to presumably make it work.

const Basket = ({basket}) =>{
    let currentTotal = basket.reduce((c, t) => Math.floor(c.price)   t, 0 );
    return(

        <div className = "basketWrapper">
            <div className = "paymentWrapper">
            
                {basket.map((cat, index) => {
                    return(

                        <div className = "catsIN">
                            <h2>Cat: {cat.name}</h2>
                            <p>{cat.name} is: £{cat.price}</p>
                        </div>
                    )
                })
                    
                }
                    <div>
                        <h4>Your total is: £{currentTotal}</h4>
                    </div>               
            </div>
        </div>
    );
}

export default Basket;