Getting Error: Argument of type 'number' is not assignable to parameter of type 'string'

Question

I am using react player in my react typescript project. I am using a material UI volume slider to set the volume of react video player.

the volume value will be between 0 - 1 so for calculating the value with respect to the slider i created a function.

const handleState = (newValue: any) => {
    setState({ ...state, volume:parseFloat(newValue/100)});
  };

the initial value of my volume is 0.5. I set it using useState

const [state, setState] = useState({
    volume: 0.5
  });

My call on the volume slider

<Slider
            min={0}
            max={100}
            value={50}
            onChange={handleState}
          />

I am getting error on newValue/100

Answer 1

parseFloat(string) receive a string

So add a Number(newValue) and toString() at the end would fix it:

const handleState = (newValue: any) => {
    setState({ ...state, volume:parseFloat((Number(newValue)/100).toString())});
  };