There's a couple of problems with this snippet:

{videos.id.map((video) => {

  <div key={video.id} {...videos}></div>

})}

1. In your code the videos variable is initially null, and then (after fetching) — an array. Arrays don't have id property, and accessing properties of null is an illegal operation. You might want to first ensure that this is an array, rather than null, and then also remove the ".id" part.

   
   



2. You don't return anything from .map()! Yes, you create a JSX element for each item of the array, but they are destroyed unused after that.

   
   

Consider using this instead:

{videos && videos.map((video) => (

  <div key={video.id} {...videos}></div>

))}

Another problem is with variables' visibility:

import videos from "./path/to/data.json";

// and then later

const [ videos, setVideos ] = useState(null);

That first variable videos (the imported one) is not visible anymore, it got shadowed by the second one.

You either rename the second variable to prevent shadowing, or remove the first one completely as it is unused.

Next thing that I can see is that the code can't make up its mind about what it is actually trying to accomplish. On one hand, router provides an ID to a specific, particular video, which means that we're trying to show only one video. On the other hand though, the FeaturedVideo component is almost a perfect fit for showing the list of all the videos.

Judging from the names and overall setup though, it is somewhat clear that you're trying to show one video, not the whole list.

Looks like you're using react-router. If that's true, in FeaturedVideo you need to access the video ID, provided by router. Given that it is v5+, you can use useParams hook for that:

import React, { useState, useEffect } from 'react';

import { useParams } from 'react-router';

const [ video, setVideo ] = useState(null); // 'video', not 'videos'

const { videoID } = useParams();



useEffect(() => {

  fetch("/src/data/data.json")

    .then((res) => res.json())

    .then((videos) => videos.filter((video) => {

      return video.id === videoID;

    }))

    .then((matched) => setVideo(matched[0]));

}, []);



// Here `video` variable holds either `null` or the first matched array item.

// Render it using suggestions above.

References:

• .map() method of arrays


• && operator (see Description section)


• Variable shadowing


• React Router Hooks