0

I was using the javascript mastery API course on youtube to try and create a youtube clone, but while trying to fetch videos using the api i got somer errors and the react app stopped rerenderng. The error occured after i put in this exact line {item.id.videoId && <VideoCard video={item}/>}

Here's my code for the video component

import {Stack, Box} from '@mui/material';
import {ChannelCard, VideoCard} from './';

const Videos = ({videos}) => {

  return (
    <Stack direction="row" flexWrap="wrap" justifyContent="start" gap={2}  >
        {videos.map((item, idx) => (
            <Box key={idx}>
                {item.id.videoId && <VideoCard video={item}/>}
            </Box>
            
        ))}
    </Stack>
  )
}

export default Videos

Here's the error

Videos.jsx:9 Uncaught TypeError: Cannot read properties of undefined (reading 'videoId')
    at Videos.jsx:9:1
    at Array.map (<anonymous>)
    at Videos (Videos.jsx:7:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1
Fimber Elems
  • 1

1 Answers1

0

Probably is because the videoId is on this path:

item.snippet.videoId

Response - extracted from the "Example responses" tab.

{
  "kind": "youtube#captionListResponse",
  "items": [
    {
      "kind": "youtube#caption",
      "id": "AUieDaZHR-hdtpvJvd_dtt6cuYWaFGFlDocKBzLyQktj",
      "snippet": {
        "videoId": "M7FIvfx5J10",
        "lastUpdated": "2013-11-14T08:09:57.310379Z",
        "trackKind": "standard",
        "language": "bg",
        "name": "",
        "audioTrackType": "unknown",
        "isCC": false,
        "isLarge": false,
        "isEasyReader": false,
        "isDraft": false,
        "isAutoSynced": false,
        "status": "serving"
      }
    },
    [...]
  ]
}
Marco Aurelio Fernandez Reyes
  • 2,071
  • 2
  • 9
  • 33