CODEWITHSUNDEEP
javascriptreactjsfirebasegoogle-cloud-firestore
JS3
JS3

Reputation: 1829

Why is Firestore storing the number as a string?

I have this form where I'll submit it in firestore. I wanted to save the counter as a number and not as a string in Firestore. I've already declared the type as a "number" and it still saves as a string.

 const handleSubmit = (e) => {
    e.preventDefault();

    try {
      const userRef = firestore.collection("users").doc();
      const ref = userRef.set({
        ....,
        counter
      });
      console.log(" saved");
    } catch (err) {
      console.log(err);
    }
  };

    const [counter, setCounter] = useState(0);
   <Grid item>
            <TextField
              type="number"
              label="counter"
              fullWidth
              required
              value={counter}
              onChange={(e) => setCounter(e.target.value)}
            />
          </Grid>

Upvotes: 1

Views: 329

Answers (1)

Drew Reese
Drew Reese

Reputation: 203146

Inputs are always string types.

You can convert to number when updating state each input change:

onChange={(e) => setCounter(Number(e.target.value))}

(and as @Dai pointed out valueAsNumber - HTMLInputElement)

valueAsNumber

double: Returns the value of the element, interpreted as one of the following, in order:

  • A time value
  • A number
  • NaN if conversion is impossible
onChange={(e) => setCounter(e.target.valueAsNumber)}

Or convert to number when updating the store:

const handleSubmit = (e) => {
  e.preventDefault();

  try {
    const userRef = firestore.collection("users").doc();
    const ref = userRef.set({
      ....,
      counter: Number(counter),
    });
    console.log(" saved");
  } catch (err) {
    console.log(err);
  }
};

Upvotes: 2

Related Questions