I have created a multipart form in React and I think my text and file fields are passing the data correctly to my console however the int values seem to be throwing errors. I know I should be using parseInt to parse these as numeric values but I am not sure if I am doing this correctly.
There is a populate dropdown menu with Redux data passed into it which has it displaying correctly however whatever way I am setting the state seems to be throwing the NaN error in my console**. I know that e.target.value will always convert to string so how would I go about parsing this to an INT?**
// state for the current field value
const [spot, setSpot] = useState({
diveLocation: ``,
diveRegionID: parseInt(``),
diveTypeID: parseInt(``),
diveSpotDescription: ``,
diveSpotPhotos: ``,
error: ``
});
.....
const handleChange = (property) => (e) => {
setSpot({
// override the changed property and keep the rest
...spot,
[property]: e.target.value,
});
}
const handleChangeInt = (property) => (e) => {
setSpot({
// override the changed property and keep the rest
...spot,
[property]: e.target.valueAsNumber,
});
}
<FormControl className={classes.formControl}>
<PopulateDropdown
dataList={diveTypeList}
titleProperty={"diveType"} // option label property
valueProperty={"diveTypeID"} // option value property
name="diveType"
placeholder="Dive Type"
label="Select Dive Type"
value={spot.diveTypeID}
onChange={handleChange("diveTypeID")}/>
</FormControl>
error message
Update
I have added in a separate "handleChangeInt" to convert the e.targetValue to a number however now my dropdown fields won't let my select a field and go blank whenever I choose an option.
<PopulateDropdown
dataList={diveTypeList}
titleProperty={"diveType"} // option label property
valueProperty={"diveTypeID"} // option value property
name="diveType"
placeholder="Dive Type"
label="Select Dive Type"
value={spot.diveTypeID}
**onChange={handleChangeInt("diveTypeID")}/>**
The first two fields below won't hold a value when I click on a select option now that I have entered an extra handleChange to parse my INTs.


