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>
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);
}
};