Warning: Failed prop type: Invalid prop `value` supplied to `ForwardRef(Slider)`

Question

I am trying to create a Material UI range Slider which has two values on it. It works if I set:

const [value, setValue] = React.useState([5,20]);
   const [value, setValue] = React.useState([val]);
   const handleChange = (event, newValue) => {
       setValue(newValue);
  };

  return (
    <div className={classes.root}>
      <Typography id="range-slider" gutterBottom>
        Temperature range
      </Typography>
      <Slider
        value={value}
        onChange={handleChange}
        valueLabelDisplay="auto"
        aria-labelledby="range-slider"
        getAriaValueText={valuetext}
      />
      <Input value={value} />
    </div>
  );

But if I set a value and assign that to the useState constant like this, it doesn't work. Even with the error, I don't understand why:

var val = [5,20]
const [value, setValue] = React.useState([val])

I get this error:

Warning: Failed prop type: Invalid prop `value` supplied to `ForwardRef(Slider)`.
    in ForwardRef(Slider) (created by WithStyles(ForwardRef(Slider)))

    in WithStyles(ForwardRef(Slider)) (at demo.js:32)

    in div (at demo.js:28)

    in RangeSlider (at index.js:6)

The slider still renders but just with 1 point instead of 2 on it

Answer 1

Have you tried removing the [] brackets when passing val to useState. The implication I'm getting of the warning is that its expecting an array, but instead it got an array of arrays when [val] was passed.