I have this array where it has a color and a quantity. And when saving in Firestore, it saves as a string. How can I save the colorStocks in Firestore as a number?

This is how I save this in 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);
  };

The colors text fields are dynamic, hence, I used an array:

<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>

Is there way where I could destructure colorList to save it as a Number() in firestore? Or what are the other ways this would be solved? This should be as a number since this would be subtracted later on.

The colorList in console:

CodePudding user response：

Just convert colorStocks to number before sending to Firestore.

const handleColorChange = (e, index) => {
    const { name, value } = e.target;
    setColorList(prevState => {
        let list = [...prevState];
        list[index][name] = name === 'colorStocks' ?  value : value;
        return list;
    });
  };