Uncaught TypeError: Cannot read properties of undefined (reading 'source') in CartItem

Question

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

Answer 1

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

Answer 2

Adding to the anwser by @terpinmd, and your comment that of failed props. Use this

<CardMedia image={item?.media?.source || ““} alt={item.name} className={classes.media} />

This gives an empty string as a prop to image if item or item.media is undefined.