Data Lodad with fetch-Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

Question

When I am trying to load local data.It causes errors.But when I am trying to load API data it works as my expectation.

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

const useFoods = () => {
    const [foods,setFoods]=useState([])
    useEffect(()=>{
        fetch('breakfast.json')
          .then(res=>res.json())
          .then(data=>setFoods(data))
    },[])
    //console.log(foods)
    return [foods]
};

export default useFoods;

Answer 1

make sure you put your breakfast.json file inside the public directory. that's where react will look for this file.