Uncaught TypeError: Cannot read properties of null (reading 'snippet')

Question

am using an youtube api of rapidapi developing this project through javascript mastery youtube channel. am getting an error of null reading snippet. The below code is from VideoDetail component.

I am currently working on developing a YouTube clone using RapidAPI's YouTube-V3 API. However, I am encountering an error related to "null reading snippet." I am seeking assistance to understand the cause of this error and find a solution. Any insights or guidance would be greatly appreciated. Thank you in advance for your help!

import { useState, useEffect } from "react";
import { Link, useParams } from "react-router-dom";
import ReactPlayer from "react-player";
import { Box, Typography, Stack } from "@mui/material";
import { CheckCircle } from "@mui/icons-material";

import { Videos } from "./";
import { fetchFromAPI } from "../utils/FetchFromAPI";

const VideoDetail = () => {
  const [videoDetail, setVideoDetail] = useState(null);
  const { id } = useParams;

  useEffect(() => {
    fetchFromAPI(`videos?part=snippet,statistics&id=${id}`).then((data) =>
      setVideoDetail(data.items[0])
    );
  }, [id]);

  // if (!videoDetail?.snippet) return "Loading...";

  return (
    <Box minHeight="95vh">
      <Stack direction={{ xs: "column", md: "row" }}>
        <Box flex={1}>
          <Box sx={{ width: "100%", position: "sticky", top: "86px" }}>
            <ReactPlayer
              url={`https://www.youtube.com/watch?v=${id}`}
              className="react-player"
              controls
            />
            <Typography color="#fff" variant="h5" fontWeight="bold" p={2}>
              {videoDetail.snippet.title}
            </Typography>
          </Box>
        </Box>
      </Stack>
    </Box>
  );
};

export default VideoDetail;

`

this is fetchApi code where am using the rapidapi youtube-V3 api.

 import axios from "axios";

    const BASE_URL = "https://youtube-v31.p.rapidapi.com";

    const options = {
      params: {
    maxResult: "100",
  },
  headers: {
    "X-RapidAPI-Key": process.env.REACT_APP_RAPID_API_KEY,
    "X-RapidAPI-Host": "youtube-v31.p.rapidapi.com",
  },
};

export const fetchFromAPI = async (url) => {
  const { data } = await axios.get(`${BASE_URL}/${url}`, options);

  return data;
};

Does this answer your question? [TypeError: Cannot read property 'name' of null in react](https://stackoverflow.com/questions/52292477/typeerror-cannot-read-property-name-of-null-in-react) — Heretic Monkey, Jul 05 '23 at 15:30

score 0 · Answer 1 · edited Jul 05 '23 at 15:29

0

You are initializing videoDetail to a null value. so the first render that variable will have a value 'null'.

you can do the following:

<Box minHeight="95vh">
  <Stack direction={{ xs: "column", md: "row" }}>
    <Box flex={1}>
      <Box sx={{ width: "100%", position: "sticky", top: "86px" }}>
        <ReactPlayer
          url={`https://www.youtube.com/watch?v=${id}`}
          className="react-player"
          controls
        />
        {videoDetail && videoDetail.snippet ? (<Typography color="#fff" variant="h5" fontWeight="bold" p={2}>
          {videoDetail.snippet.title}
        </Typography>) : null}
      </Box>
    </Box>
  </Stack>
</Box>

edited Jul 05 '23 at 15:29

Heretic Monkey

11,687
7
53
122

answered Jul 05 '23 at 15:26

Noahfaita

21
4

Thank you. Yes, this works but when I click on a video it does not show the video am getting a cross error. "Cross-Origin Read Blocking (CORB) blocked cross-origin response https://www.youtube.com/watch?v=undefined with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details." – Abhishek Jul 06 '23 at 05:59
as you can see you have an undefined value in the url "v=undefined", that's mean the id is undefined in this part here: `` So I think that the problem is in here: `const { id } = useParams;` useParams is a function, you need to fix it this way: `const { id } = useParams();` I advise to try to add some console.log() messages to debug this issue. – Noahfaita Jul 06 '23 at 08:28
Thank you so much. It took me 3 days to look what was wrong and finally, I was juz missing parenthesis. and now everything works fine. – Abhishek Jul 06 '23 at 13:47

Uncaught TypeError: Cannot read properties of null (reading 'snippet')

1 Answers1