How to fix unable to fetch data from local JSON file with axios and React?

To fix unable to fetch data from local JSON file with axios and React, we put the local JSON file in the public folder of our React project.

Then we call axios.get with the relative path to the JSON file.

For instance, we write

const handleSubmit = async (e) => {
  e.preventDefault();
  //...
  const { data } = await axios.get("./data.json");
  //...
};

to call axios.get with './data.json to get the content of data.json in the public folder in our React project.