Your database keys need to follow a consistent naming convention suitable for a database. All your keys should be lowercase and contain no spaces or special characters. You also have discrepancies with your key names between records.
Note the first two items in the array. The quantity key displays with double quotes and a space after the y. But in the third array item, the quantity key does not include the quotes or space. The price key suffers from the same problem. The third array item price key is formatted with a space after the e. I suspect this is the cause of the value not displaying correctly.
If your code references a key Price, but the actual key is Price (with a trailing space), technically, you have two different keys.
Standardize all of your keys to use safe naming conventions
Ensure every key in your collections item uses the correct variable type. Quantity and price should be numbers, the item title should be a string. I'm not sure what you're using keyName for, but typically keys are formatted in an SKU-type format, not multi-word strings. For example, you may rename Fancy Feast Tender Feast Variety Pack Canned Kitten Food, 3-oz, case of 24 to something like _fftf_vp_kitten_3oz24.
fftf: identifies Fancy Feast Tender Feast
vp: variety pack
Then you can reuse the format for all products from the same company, adjusting the animal, size, and quantity values as needed.
I would get your database in order, then revisit your code. I think if you have consistent database keys and types, the code you have will render correctly.
lingan233
commented
1 year ago
Missing dependency
Install
react-router-dom.Database structure issues
Your database keys need to follow a consistent naming convention suitable for a database. All your keys should be lowercase and contain no spaces or special characters. You also have discrepancies with your key names between records.
Note the first two items in the array. The quantity key displays with double quotes and a space after the y. But in the third array item, the quantity key does not include the quotes or space. The price key suffers from the same problem. The third array item price key is formatted with a space after the e. I suspect this is the cause of the value not displaying correctly.
If your code references a key
Price,but the actual key isPrice(with a trailing space), technically, you have two different keys.Standardize all of your keys to use safe naming conventions
Validate your database key types
Ensure every key in your collections item uses the correct variable type. Quantity and price should be numbers, the item title should be a string. I'm not sure what you're using
keyNamefor, but typically keys are formatted in an SKU-type format, not multi-word strings. For example, you may rename Fancy Feast Tender Feast Variety Pack Canned Kitten Food, 3-oz, case of 24 to something like _fftf_vp_kitten_3oz24.Then you can reuse the format for all products from the same company, adjusting the animal, size, and quantity values as needed.
I would get your database in order, then revisit your code. I think if you have consistent database keys and types, the code you have will render correctly.