Warning: Received NaN for the `value` attribute. If this is expected, cast the value to a string. input on multipart form

Viewed 2545

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

enter image description here

enter image description here

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.

enter image description here

1 Answers

You need to initialize your state with the empty string "" or a value matching with one of the options provided to select component.

So, initialize with empty string:

const [spot, setSpot] = useState({
  diveLocation: "",
  diveRegionID: "", // here
  diveTypeID: "", // and, here
  diveSpotDescription: "",
  diveSpotPhotos: "",
  error: ""
});

You can also use two back ticks to create empty string.

Related