store my firestore value as number but it is being stored as string-CodePudding

When I try to store my collection values all my values are stored as string i want to store my spicy level and servings value as a number in firestone.

So can someone tell me what to add or change so that it is stored as a number value. i have a form validation in place normally i will say save e.target.valueAsNumber which worked for input feild but it is not working for select. when i try to submit error message comes please save all feilds

code :

const [menu, setMenu] = useState([])
const [form, setForm] = useState({
kookid: "",
kookname: "",
name: "",
cuisine: "",
foodtype: "",
spicylevel: "",
servings: "",
price: "",
description: "",

})
const menuCollectionRef = collection(db, "menu")

useEffect(() => {
onSnapshot(menuCollectionRef, snapshot => {
  setMenu(snapshot.docs.map(doc => {
    return {
      id: doc.id,
      viewing: false,
      ...doc.data()
    }
  }))
})
}, [])

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

if (
  !form.kookid ||
  !form.kookname ||
  !form.name ||
  !form.cuisine ||
  !form.foodtype ||
  !form.spicylevel ||
  !form.servings ||
  !form.price ||
  !form.description
  
) {
  alert("Please fill out all fields")
  return
 
}

addDoc(menuCollectionRef, form)

setForm({
  kookid: "",
  kookname: "",
  name: "",
  cuisine: "",
  foodtype: "",
  spicylevel: "",
  servings: "",
  price: "",
  description: "",
}).then(() => {
})
}

<div className="form-group2">
        <label>Spicy Level</label>
        <select
          onChange={e => setForm({ ...form, spicylevel: e.target.value })}>
          <option value="">Select Spicy Level</option>
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>

      </div>

CodePudding user response：

Data read from select has a string type by default.

If you want it to become a numeric value, you need to parse that string into a number:

spicylevel: parseInt(e.target.value)