Saturday, May 25, 2024
 Popular · Latest · Hot · Upcoming
84
rated 0 times [  86] [ 2]  / answers: 1 / hits: 18664  / 4 Years ago, fri, october 2, 2020, 12:00:00

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


More From » reactjs

 Answers
4

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.


[#50618] Saturday, September 19, 2020, 4 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
joseluispauld

Total Points: 13
Total Questions: 132
Total Answers: 98

Location: Venezuela
Member since Sat, Apr 24, 2021
3 Years ago
;