Tengo esta matriz donde tiene un color y una cantidad. Y al guardar en Firestore, se guarda como una cadena. ¿Cómo puedo guardar los colorStocks de color en Firestore como un número?

Así es como guardo esto en Firestore:

 const [productName, setProductName] = useState(); const [size, setSize] = useState(); const [price, setPrice] = useState(); const [colorList, setColorList] = useState([{ color: "", colorStocks: "" }]); const handleColorChange = (e, index) => { const { name, value } = e.target; const list = [...colorList]; list[index] = { ...list[index] }; // copy the item too list[index][name] = value; setColorList(list); }; const handleSubmit = async (e) => { e.preventDefault(); const docRef = await addDoc(collection(db, "products"), { prodName: productName, size: size + "-" + size1, colorList, }); console.log("Document written with ID: ", docRef.id); };

Los campos de texto de colores son dinámicos, por lo tanto, utilicé una matriz:

 <form onSubmit={handleSubmit}> <Grid> <Grid item xs> //product textfield here </Grid> <Grid item xs> //some select here </Grid> <Grid item xs> size /> </Grid> </Grid> <Typography variant="h6">Colors</Typography> {colorList.map((singleColor, index) => ( <div key={index}> <div> <Grid> <TextField label="color" name="color" type="text" id="color" required value={singleColor.color} onChange={(e) => handleColorChange(e, index)} /> </Grid> <br /> <Grid> <TextField label="Stocks" name="colorStocks" type="text" id="colorStocks" required value={singleColor.colorStocks} onChange={(e) => handleColorChange(e, index)} /> </Grid> </div> <br /> <Grid item xs> //button to remove color </Grid> <br /> //button to add color </div> ))} <br /> <Divider /> <br /> <Grid item xs> <Button type="submit">Submit</Button> </Grid> </form>

¿Hay alguna forma en la que pueda desestructurar colorList para guardarlo como Number() en firestore? ¿O cuáles son las otras formas en que esto se resolvería? Esto debería ser como un número ya que esto se restaría más adelante.

La lista de colorList en la consola: