This code is responsible for displaying the components on the page. But in the console I get the following warnings:
Warning: Failed prop type: Invalid prop
lgsupplied toForwardRef(Grid), expected one of type [number, boolean].
Warning: Failed prop type: Invalid prop
smsupplied toForwardRef(Grid), expected one of type [number, boolean].
Warning: Failed prop type: Invalid prop
xssupplied toForwardRef(Grid), expected one of type [number, boolean].
As I understand it, I'm using Grid incorrectly. But I still can’t figure out how to transfer this one so as not to destroy this page markup. Please tell me how to get rid of these warnings
const GridProps = {
container: true,
xs: '12', sm: '7', lg: '9',
}
export default function Devices() {
const urlParams = useParams();
return (
<Grid className={classes.containerStyle}>
<Grid className={classes.widthAndHeight}>
<Grid {...GridProps}>
</Grid>
</Grid>
</Grid>
);
}
Warning: Failed prop type: Invalid prop lg supplied to ForwardRef(Grid), expected one of type [number, boolean].
The Grid component expects lg, md, sm in these options number or boolean type, and you are using a string type.
lg = 'auto' | number | bool Grid Props
Correct should be:
const GridProps = {
container: true,
xs: 12,
sm: 7,
lg: 9,
item: true,
};