I have a map function to a state that I'm sure it is not empty because its states have been logged.
When i load the page it shows the div "did Load", but thats about it. Console also does not register he "running" log.
This is for CS50W course, so I am using in-browser Babel transformer. Someone suggested i completly switched my approach to compiling the code but that would mean learing and making a whole new setup, so I was hoping that is not the reason this is not working.
class Posts extends React.Component{
constructor(props){
super(props)
this.state = {
aposts: [],
isLoaded: false
}
}
componentDidMount() {
console.log('running go fetch');
let currentList = [];
fetch('/posts')
.then(response => response.json())
.then(posts => {
for (var i = 0; i < posts.length; i++) {
currentList.push(posts[i])
console.log(currentList[i])
}
});
console.log(currentList)
this.setState({ aposts: currentList, isLoaded: true }, () => {
console.log(this.state.aposts, 'aposts');
});
}
render(){
var isLoaded = this.state.isLoaded
if (isLoaded = true){
return (
<div>
<div>did load</div>
{this.state.aposts.map(function(apost) {
console.log("running")
return (<li key = {apost.id}> {apost.id} </li>)
})}
</div>
);
}
else{
<div>No load</div>
}
}
