React Read Local Json File

Posted on  by admin
Modified1 year, 3 months ago.

Im trying to figure out the best way of accessing the local JSON file and storing it in my current state. I hope i am in the right track :). This clearly looks like your relative path is not correct. UPDATE: From the comments and cross checking it is clear that we must move our json file into a public folder for it to work.

So you need to first do that and directly use this path:. HERE IS THE DEMO: 11 gold badge1414 silver badges3232 bronze badges. 3232 bronze badges. I would use import to load json data and then use them. To fetch data you need to upload your file in public folder. Then you can easily load that json data. Here is the link of working code. Make sure you've uploaded your data inside public folder.

Otherwise it won't work.


Now you have json variable as valid array containing your data. In this guide, you’ll learn how to save and read the local JSON file in the react project. Three ways of accessing the local JSON file. How to read JSON file using react API call(fetch, axios).

JSON data in the js file. Inside src (No Need Axios or Fetch for api call). Save your JSON file inside src anywhere for example —. then import and read inside any component like below. State-Try to assign and handle through the state because state is dynamic, it enables a component to keep track of changing information in between renders and for it to be dynamic and interactive.

For the class-based component —. How to read JSON file using reactjs API call(fetch, axios). Sometimes we need to test something locally so many times that’s why needed fake data instead of calling the API.