Hi Team
I really experience a problem and try to use local json data to fetch it using rest api. when i debug i get this error and dont know how to fix it.
//db.json
{
“product_name”: [
{
“id”: 1,
“title”: “2021 hot selling GPS 5G quadcopter drone with camera remote control aircraft drone WiFi mini drone camera”
}
],
“shipping_information”: [
{
“id”: 2,
“country”: “South Africa”,
“title”: “Express UPS Saver (HK)”,
“info”: “After payment is complete, your order will ship within”,
“lead_time”: “10 days”,
“shipping_time”: “6 -10 days”
}
],
“options”:[
{
“id”:3,
“label”:“1080p”,
“price”: 833.99,
“currency”:“ZAR”,
“symbol”:“R”
},
{
“id”:4,
“label”:“4k”,
“price”:895.31,
“currency”:“ZAR”,
“symbol”:“R”
},
{
“id”:5,
“label”: “Battery (Accessories)”,
“price”:78.5,
“currency”:“ZAR”,
“symbol”:“R”
}
],
“discounts”:[
{
“id”:6,
“amount”:“20%”,
“end_date”: “2022-06-18T03:11:46+02:00”
}
],
“reviews”: {
“id”: 7,
“rating”: “5.0”,
“count”: 6,
“total_buyers”: 18
}
}
// fetching data
/**
- Sidebar for shipping information details
*/
import React,{ useEffect, useState} from ‘react’;
class Sidebar extends React.Component {
state = {
isLoading: true,
prodData: ,
error: null
};
getFetchData() {
this.setState({ loading: true }, () => {
fetch(“http://localhost:3000/shipping_information”)
.then(res => res.json())
.then(result =>
this.setState({
loading: false,
prodData: result
})
)
.catch(console.log);
});
}
componentDidMount() {
this.getFetchData();
}
render() {
const { prodData, error } = this.state;
return (
<React.Fragment>
All User
{error ?
{error.message}
: null}{
prodData.map(prod => {
const { id, country, title, info, lead_time, shipping_time } = prod;
return (
{country}
{title}
{info}
{lead_time}
{shipping_time}
<hr />
</div>
);
})
}
</React.Fragment>
);
}
}
export default Sidebar