Local server. It’s just a JSON file that I made.
The value of check is the JSON.
The code which i have posted above has to work. if not, the url is not correct.
1 Like
It does work, when I console.log(check) i can see my JSON, but it appears that it is not transfering to propdata correctly, because when I console.log(propdata) it returns undefined.
class Services extends React.Component {
constructor(props) {
super(props);
this.state = {
ServiceItems: this.props.data,
propdata:""
};
}
componentDidMount(){
fetch(’/addnewitems.json’)
.then(res => res.json())
.then(check =>{
console.log(check)
//what is the output of check?
this.setState({
…this, propdata: check,
})
}
)
}
render(){
console.log(this.state.propdata)
}
}
may i know the result which you get from render method
1 Like
As said, try just moving the console.log to the render function(s).
In services.js you have this.state.propdata which is an Object. You can not map on it you want this.props.propdata.main.serviceitems
Here is a quick fork, removed and commented out some code
Also, it would be nice if you included the Bootstrap stuff as a dependency.
1 Like
Sorry, I am doing this on my local machine not on Codesandbox so It was just a quick set up.
And thank you to all of you for your help. This was the most difficult problem I’ve encountered in my whole coding journey before.
1 Like
No problem, happy to help.
There are some things you may know from plain JS that do not transfer that well to React. Like knowing how, when, and where to log data. I will say the debugger still works so that might be worth learning a bit about. You just have to be careful about what code you step into, so you do not end up inside some library code.
Difficult is good, so is struggling with code. Embrace it and learn from it. Happy coding!
1 Like