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

You have to change {} to array first to be able to map over it. You can easily place ? after test like this. or make in the default value of the state a default value for item name. because this error results as you map over an empty object.

import { useEffect, useState } from 'react';
function App() {

  const[test, setTest] = useState([{name:"default"}])
  useEffect(() => {
    testfunc()
  }, [])

  async function testfunc(){
      let api = await fetch('https://jsonplaceholder.typicode.com/users')
      let apijson = await api.json()
      setTest(apijson)
  }
  

  return (
    <div className="App">
      {
        test?.map((item) => {
          return(
            <div>
              {item.name}
            </div>
          )
        })
      }
    </div>
  );
}

export default App;

Two problems:

1. You need to set your state inside the second then like so:

    useEffect(() => {
        fetch("http://127.0.0.1:8000/app/reviews/",{
            credentials: 'include',
            method: 'GET',
            mode: 'same-origin',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
              'X-CSRFToken': CSRF_TOKEN
            }})
            .then(response => response.json()) 
            .then(data => setState(data))
    })

2. You need to use a dependency array in your useRef or else you will get infinite re-renders. So change it to:

    useEffect(() => {
        fetch("http://127.0.0.1:8000/app/reviews/",{
            credentials: 'include',
            method: 'GET',
            mode: 'same-origin',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
              'X-CSRFToken': CSRF_TOKEN
            }})
            .then(response => response.json()) 
            .then(data => console.log(data)) -->works fine
            .then(data => setState(data)); --> not sure

        
    }, [])

Setting the dependancy array to an empty array [] will ensure that your useEffect only runs your fetch once on first render.

You just need to return the json from the fetchData function and await it where you need it:

  useEffect(() => {
    async function fetchData(url) {
      const response = await fetch(url, {
        headers : { 
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        }
      })

      if (!response.ok) {
        throw new Error(`Failed to fetch ${url}, got ${response.status}`)
      }

      // note the return
      return await response.json()
    }

    // Note need the IIFE wrapper here because you
    // can't return a Promise from the useEffect callback
    (async function() {
      try {
        const initialData = await fetchData(whatever)
        const allData = await Promise.all(initialData.map(async (data) => {
           try {
             // fetch and return more data
             const moreData = await fetchData(data.whatever)
             return moreData
           } catch (err) {
             // do something with error, can return it or some
             // sentinel value like null
             return err
           }
        }))

        // setState, filtering out the failures
        setState(allData.filter(x => !(x instanceof Error))
      } catch (err) {
        console.error('failed initial fetch')
      }
    })()
  }, [])

On a side note don't mix .then/.catch with async/await in the same expression, and don't reject with strings as many Promise rejection handling code implicitly assumes the thing that caused the rejection is an actual error instance. If you wouldn't throw it don't reject a Promise with it.

When you require() a local .json file, what I would expect to happen is to get an object instead of an URL. Fetch would then stingify that object and make a request to '[object%20Object]', which would naturally fail.

Since you've already require()d it, there is no need to fetch it. It's already parsed and ready to use.

const mockData = require('../../json/MOCK_DATA.json');



                <FlatList 
                    data={mockData}
                    keyExtractor={({id}, index) => id}
                    renderItem={({item}) => (
                        <Text>
                            {item.title}, {item.realeseYear}
                        </Text>
                    )}
                />

Issue

1. useEffect hook callbacks are 100% synchronous, they can't be asynchronous (i.e. declared async) at all. This also implicitly returns a Promise and messes with the effect cleanup functionality.
2. Your code never calls the fetchData function, so nothing is really updated.
3. You stomp your state shape and place the result array at the root state level instead of in an object under the hits key.

Solution

1. Remove the async keyword from the effect callback.
2. Invoke fetchData in the effect callback body.
3. Update state correctly.

Code:

useEffect(() => {
  const fetchData = async () => {
    try {
      const result = await axios("url");
      setUsers({ hits: result.data });
    } catch(error) {
      // handle any GET request or response handling errors
    }
  };
  fetchData();
}, []);