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

Question

hey I want to calculate the sum of the item prices but it only display 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>
    )
}

and 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. it 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

I copy/pasted your code snippet into a running codesandbox and it seems to function correctly. Can you try creating a codesandbox of your own that reproduces the issue you describe? — Drew Reese
I have a question, while installing react-currency-format it kept erroring and then I installed it with --force to my react. is that a case that it is the problem? I think the issue was my react version or something like that @DrewReese — fatemeh zamanipour
I suspect not, it has a peer dependency of "react": "^0.14 || ^15.0.0-rc || ^15.0.0 || ^16.0.0-rc || ^16.0.0", so as long as you are running newer you should be ok. For example, my linked sandbox is running React v17. Do you have any error messages while it's running? Or can you include the error message you saw when trying to install it (along with the command used to install)? — Drew Reese
no erorr, my react is v17.0.2 . and the erorr will be conclude in the question — fatemeh zamanipour
Great, sounds like you resolved your issue. I'm voting to close as "Unreproducible, or caused by typo". Cheers. — Drew Reese

fatemeh zamanipour fatemeh zamanipour · Accepted Answer · 2021-04-13T09:38:52

I solved the problem. I'd made a mistake putting prices in string format and then I put them into {} and problem solved.

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

1 Answers