Type 'unknown' is not assignable to type '(prevState: number | undefined) => number | undefined'

Question

I am using material ui's select component to save the selected value in a variable:

const [ratio, setRatio] = useState<number>();
...
const handleChangeRatio = (e: React.ChangeEvent<{ name?: string | undefined; value: unknown; }>) => {
    //const value = typeof e.target.value === "number" ? e.target.value : "";
    setRatio(e.target.value);
};
...
    <Select
        labelId="demo-simple-select-filled-label"
        id="demo-simple-select-filled"
        value={splittingMethod}
        onChange={(e)=>handleChangeRatio(e)}
    >
        <MenuItem value={0}>
            0
        </MenuItem>
        <MenuItem value={0.1}>0.1</MenuItem>
        <MenuItem value={0.2}>0.2</MenuItem>
    </Select>

However, I get this error while setting the state inside the handleChange function, how can I fix this?

Argument of type 'unknown' is not assignable to parameter of type 'SetStateAction<number | undefined>'.
  Type 'unknown' is not assignable to type '(prevState: number | undefined) => number | undefined'.

Answer 1

React's useState<number>() returns a tuple of values with types: ratio: number | undefined, setRatio: SeStateAction<number | undefined>. While you're trying to feed to setRatio value of type unknown.

The easiest way is to narrow the type unknown to number:

const handleChangeRatio = (e: React.ChangeEvent<{ value: unknown }>) => {
    if (typeof e.target.value === 'number') setRatio(e.target.value)
};

or with better runtime safety:

const handleChangeRatio = (e: React.ChangeEvent<{ value: unknown }>) => {
    const value = Number(e.target.value)
    if (!isNaN(value)) setRatio(value)
};