react-currency-format only shows the last item's price from basket

Question

I want to calculate the sum of the item prices but it only displays the last item's price.

Here is my code with the react-currency-format:

function Subtotal() {
        const [{basket}, dispatch]= useStateValue();

            
    return (
        <div className="subtotal">
        <CurrencyFormat
            renderText={(value) =>(
                <>
                    <p>
                        Subtotal({basket?.length} items):
                        <strong>{value}</strong>
                    </p>
                    <small className="subtotal-gift">
                        <input type="checkbox" /> this order contains a gift
                    </small>
                </>
            )}
            decimalScale={2}
            value={getBasketTotal(basket)}
            displayType={"text"}
            thousandSeparator={true}
            prefix={"$"}
      />
      <button>Proceed to checkout</button>
            
        </div>
    )
}

This is my reduce function in reducer.js:

export const getBasketTotal = (basket) => 
    basket?.reduce((amount, item) => item.price + amount  , 0)

I had an error while installing react-currency and i --forced it. This is the error:

npm i react-currency-format       
npm notice 
npm notice New minor version of npm available! 7.3.0 -> 7.9.0     
npm notice Changelog: https://github.com/npm/cli/releases/tag/v7.9.0
npm notice Run npm install -g [email protected] to update!
npm notice 
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14 || ^15.0.0-rc || ^15.0.0 || ^16.0.0-rc 
|| ^16.0.0" from [email protected]
npm ERR! node_modules/react-currency-format
npm ERR!   react-currency-format@"*" from the root project        
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependencnpm ERR! See C:\Users\Programmer\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Programmer\AppData\Local\npm-cache\_logs\2021-04-12T07_51_04_200Z-debug.log
PS D:\amazonclone\amazon-clone> npm install react-currency-format 
--save
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14 || ^15.0.0-rc || ^15.0.0 || ^16.0.0-rc 
|| ^16.0.0" from [email protected]
npm ERR! node_modules/react-currency-format
npm ERR!   react-currency-format@"*" from the root project        
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Programmer\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Programmer\AppData\Local\npm-cache\_logs\2021-04-12T07_52_02_519Z-debug.log

Answer 1

Put your price into braces {} instead of string format

Answer 2

Try with fillna(axis=1):

new = df.fillna(method='ffill',axis=1)

This would fill all your columns when blank, with their respective value on the left.

Better should be ffill only:

df = df.ffill(axis=1)

Answer 3

Try df[col] = df[col].fillna(df[left_col])