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 — Heretic Monkey
– Heretic Monkey, Commented Jul 5, 2023 at 15:30

Heretic Monkey · Accepted Answer · 2023-07-05 15:29:04Z

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 5, 2023 at 15:29

Heretic Monkey

12.2k7 gold badges63 silver badges133 bronze badges

answered Jul 5, 2023 at 15:26

Noahfaita

214 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Abhishek Over a year ago

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 youtube.com/watch?v=undefined with MIME type text/html. See chromestatus.com/feature/5629709824032768 for more details."

Noahfaita Over a year ago

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: <ReactPlayer url={https://www.youtube.com/watch?v=${id}} className="react-player" controls /> 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.

Abhishek Over a year ago

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.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related