Search code examples
reactjstypescript

Type error: Type '(number | undefined)[]' is not assignable to type 'number[]'

I'm still getting used to Typescript in my NextJS app and can't get past this TS error. It's for the line value={value} in <Slider.Root>

value is an object with 2 number elements: a min and a max.

I modified the interface of SliderProps below to make value a number array (it was just a number before), and played around with a few other ways to approach this problem but am stuck after several hours.

Type '(number | undefined)[]' is not assignable to type 'number[]'.
  Type 'number | undefined' is not assignable to type 'number'.
    Type 'undefined' is not assignable to type 'number'.

SliderRange function -- where problem is

export function RangeSlider(props?: any) {

    const { start, range, canRefine, refine } = useRange(props);
    const { min, max } = range;
    const [value, setValue] = useState([min, max]);

    const from = min;
    const to = max;

    useEffect(() => {
        if (from && to) {
            setValue([
                parseFloat((from / 100).toFixed(2)),  // Format to 2 decimals
                parseFloat((to / 100).toFixed(2))
            ]);
        }
    }, [from, to]);


    return (

        <div className="slider-container">
            <Slider.Root
                className="slider-root"
                min={min ? min / 100 : 0}
                max={max ? max / 100 : 100}
                value={value} // <---- PROBLEM HERE. 
                onValueChange={(newValue) => setValue([newValue[0], newValue[1]])}
                onValueCommit={(newValue) => refine([newValue[0] * 100, newValue[1] * 100])}
                disabled={!canRefine}
                minStepsBetweenThumbs={15}
            >
                <Slider.Track className="slider-track">
                    <Slider.Range className="slider-range" />
                </Slider.Track>

                <Slider.Thumb className="slider-thumb" />
                <Slider.Thumb className="slider-thumb" />
            </Slider.Root>

        </div>
    );
}

Interface of SliderProps -- where type value is set

export interface SliderProps extends Omit<SliderHorizontalProps | SliderVerticalProps, keyof SliderOrientationPrivateProps | 'defaultValue'> {
    min?: number;
    max?: number;
    step?: number;
    minStepsBetweenThumbs?: number;
    value?: number[];
    defaultValue?: number[];
    onValueChange?(value: number[]): void;
    onValueCommit?(value: number[]): void;
    inverted?: boolean;
}
Solution

  • You can try the following:

    const [value, setValue] = useState([min ?? 0, max ?? 100]);