I am getting an error in while accessing the data present in the cart via cartitem. I am not so good at this. can someone help me in rectifying the error??
import React from 'react'
import { Typography, Button, Card, CardActions, CardContent, CardMedia } from '@material-ui/core';
import useStyles from './styles';
const CartItem = ({ item }) => {
const classes = useStyles
return (
<Card>
<CardMedia image={item.media.source} alt={item.name} className={classes.media} />
<CardContent className={classes.cardContent}>
<Typography variant="h4">{item.name}</Typography>
<Typography variant="h5">{item.line_total.formatted_with_symbol}</Typography>
</CardContent>
<CardActions className={classes.cardActions}>
<div className={classes.buttons}>
<Button type="button" size="small">-</Button>
<Typography>{item.quantity}</Typography>
<Button type="button" size="small"> </Button>
</div>
<Button variant="contained" type="button" color="secondary">Remove</Button>
</CardActions>
</Card>
)
}
export default CartItem
These are a few errors poppoing in the browser
CodePudding user response:
We would need more information to tell exactly why, but 'media' (or possibly item) seems to be undefined per the error.
You can add some saftey with this syntax:
<CardMedia image={item?.media?.source} alt={item.name} className={classes.media} />
Notice the '?' above....more info on what that does here