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;
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"
>