Can someone help me in solving this error. I am unable to rectify this error. this is what i got in the browser's console

const Cart = ({ cart }) => {
    const classes = useStyles();

    const EmptyCart = () => (
        <Typography variant="subtitle1">
            You have no items in your cart, start adding some!!!
        </Typography>
    );
    const FilledCart = () => (
        <>
            <Grid container spacing={3}>
                {cart.line_items.map((item) => (
                    <Grid item xs={12} sm={4} key={item.id}>
                        <CartItem item={ item }/>
                    </Grid>
                ))}
            </Grid>
            <div className={classes.cardDetails}>
                <Typography variant='h4'>
                    Subtotal: {cart.subtotal.formatted_with_symbol}
                </Typography>
                <Button className={classes.emptyButton} size="large" type="button" variant="contained" color="secondary">Empty cart</Button>
                <Button className={classes.checkoutButton} size="large" type="button" variant="contained" color="primary">Checkout</Button>
            </div>
        </>
    )
    if (!cart.line_items)
        return '.......loading';

    return (<Container>
        <div className={classes.toolbar} />
        <Typography className={classes.title} variant='h3' gutterBottom>
            Your Shopping Cart
        </Typography>
        {!cart.line_items.length ? <EmptyCart /> : <FilledCart />}
    </Container>);
};
export default Cart;

Can someone help me in solving this error. I am unable to rectify this error. this is what i got in the browser's console

const Cart = ({ cart }) => {
    const classes = useStyles();

    const EmptyCart = () => (
        <Typography variant="subtitle1">
            You have no items in your cart, start adding some!!!
        </Typography>
    );
    const FilledCart = () => (
        <>
            <Grid container spacing={3}>
                {cart.line_items.map((item) => (
                    <Grid item xs={12} sm={4} key={item.id}>
                        <CartItem item={ item }/>
                    </Grid>
                ))}
            </Grid>
            <div className={classes.cardDetails}>
                <Typography variant='h4'>
                    Subtotal: {cart.subtotal.formatted_with_symbol}
                </Typography>
                <Button className={classes.emptyButton} size="large" type="button" variant="contained" color="secondary">Empty cart</Button>
                <Button className={classes.checkoutButton} size="large" type="button" variant="contained" color="primary">Checkout</Button>
            </div>
        </>
    )
    if (!cart.line_items)
        return '.......loading';

    return (<Container>
        <div className={classes.toolbar} />
        <Typography className={classes.title} variant='h3' gutterBottom>
            Your Shopping Cart
        </Typography>
        {!cart.line_items.length ? <EmptyCart /> : <FilledCart />}
    </Container>);
};
export default Cart;

• javascript
• reactjs
• jsx

• You showed us the Cart ponent, but the error message says the problem is in Products. Can you show us that? Presumably, you have some code in there that does a <Grid justify={/* something */}>, which instead needs to be <Grid justifyContent={/* something */}> – Nicholas Tower Commented Feb 24, 2022 at 14:53
• thankyou @NicholasTower. it worked. I just needed a clarification how did u get to know that the error was in Products . – Shreesha Commented Feb 24, 2022 at 15:42
• The warning message that you showed has a trace of the ponent hierarchy, which goes Grid -> WithStyles -> main -> Products, etc. Products is the first ponent in that list which is written by you. – Nicholas Tower Commented Feb 24, 2022 at 16:22

2 Answers 2

Note that The prop justify is deprecated, use justifyContent instead. So, replace justify by justifyContent.

Before :

<Grid container **justify="space-between"** alignItems="center" spacing={4}>

After:

<Grid container **justifyContent="space-between"** alignItems="center" spacing={4}>

I was checked official document but no luck, after that I did custom styling in following way and it work fine for me.

Error:

<Grid
  container
  direction="row"
  justifyContent="center"
  alignItems="center"
>

Solution:

<Grid
  container
  direction="row"
  style={{justifyContent:"center"}}
  alignItems="center"
>