Having error "SyntaxError: Unexpected token < in JSON at position 0” - reactjs

Question

I'm new to React btw, I've been trying to read my test.json file which is located in :
src/data/test.json
My app.js is written as such :
import React, { Component } from 'react';
import './App.css';
var HotelData = require('../data/test.json')
class App extends Component {
constructor(){
super();
this.state = {
data: [],
}
}
getDatafromHotel(){
fetch(HotelData)
.then((Response) => Response.json())
.then((findresponse) => {
console.log(findresponse.data);
this.setState({data: findresponse.data})
})
}
componentDidMount(){
this.getDatafromHotel();
}
render() {
return(
<div className="body">
<div className="container">
{this.state.HotelData.map((hotel) => (
<div className="row">
<div className="col-1">
{hotel.roomTypeLabel}
</div>
<div className="col-2">
</div>
</div>
))}
</div>
</div>
);
}
}
export default App;
Is there any way that I could read test.json file rather than the index.html in the public folder?
test.json file : https://api.myjson.com/bins/16ocrc

Answer 1

You can't use require to import JSON files like you would for javascript ones. Take a look at the fetch api: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch.
As for the code you need to change, it would be:
getDatafromHotel(){
fetch("../data/test.json")
.then((Response) => Response.json())
.then((findresponse) => {
console.log(findresponse.data);
this.setState({data: findresponse.data})
})
Lastly, you need to remove the require statement.

Answer 2

the line:
var HotelData = require('../data/test.json';
should be:
var HotelData = '../data/test.json';
assuming that location is correct and not a 404.