I have this colorMap from firestore which is a map.
What I’m trying to do is add more data in the colorMap. Let’s say I have these:
Green: 50
Black 50
Red 20
And I wanted to add Pink : 80. But what my code currently does is, if I’ll add Pink: 80, the Pink becomes an array instead of a field. This is what happens when I save it in Firestore.
Expected output
Once I’ll add Black : 80, it should be the same data types with the other colors as well.
Submitting in firestore:
//converting colorList to colorMap (map)
const colorMap = colorList.reduce(function (map, obj) {
map[obj.color] = obj.colorStocks;
return map;
}, {});
const colorSave = Object.keys(colorMap);
const qty = Object.values(colorMap);
const handleSubmit = (index) => async (e) => {
e.preventDefault();
const ref = doc(db, "products", state);
await updateDoc(ref, {
...product[index],
[`colorMap.${colorSave}`]: qty,
});
console.log("done");
};
This is the console for the colorMap:
Form
{colorList.map((singleColor, index) => (
<div key={index}>
<>
<>
<TextField
label="Color"
name="color"
type="text"
id="color"
required
value={singleColor.color}
onChange={(e) => handleColorChange(e, index)}
/>
<TextField
label="Stocks"
name="colorStocks"
type="number"
id="colorStocks"
required
value={singleColor.colorStocks}
onChange={(e) => handleColorChange(e, index)}
/>
</>
</>
</div>
<br />
//button to remove the row of the textfield
</div>
))}
//button to add the row of the textfield
