React prop array length returning 0 [duplicate] - reactjs

Question

This question already has an answer here:
Can't iterate over my array/object. Javascript, React Native [duplicate]
(1 answer)
Closed 5 years ago.
I have an array prop on a component called jobs that will show in the console, but always returns length:0
The Image you will see definitely has three elements in the array, but when I attempt to access the array length through console.log(this.props.jobs.length);
Why do the elements of this array log out, but I can't access the elements in code?
Per request from #finalfreq, see full code below:
const DepartmentContainer = React.createClass({
getInitialState:function(){
return{sortedJobs:{}, loaded:false};
},
componentDidMount:function(){
//console.log(this.state.sortedJobs);
var departments = this.props.departments;
departments.map(function(name, index){
this.state.sortedJobs[name] = [];
}, this)
var _this = this;
axios.get('{api call returning json}')
.then(function (response) {
for(let i=0;i<response.data.jobs.length;i++){
for(let j=0;j<response.data.jobs[i].metadata[0].value.length;j++){
_this.state.sortedJobs[response.data.jobs[i].metadata[0].value[j]].push(response.data.jobs[i]);
}
}
})
.catch(function (error) {
console.log(error);
});
//console.log(Object.keys(_this.state.sortedJobs).length);
this.setState({sortedJobs: _this.state.sortedJobs});
this.setState({loaded:true});
},
render:function(){
var departments = this.state.sortedJobs;
return(
<div>
{this.state.loaded ?
<div className="row grid-12">
{Object.keys(departments).map(function(label, department){
//console.log(departments[label]);
return <Department key={label} title={label} jobs={departments[label]}/>
})}
</div>
:
<div>Test</div>
}
</div>
);
}
});
const Department = React.createClass({
getInitialState:function(){
return{hidden:false, hasJobs:false};
},
componentWillMount:function(){
const jobs = this.props.jobs;
if(jobs.length>0){
this.setState({hasJobs:true});
}
},
componentDidMount:function(){
console.log(this.state.hasJobs);
console.log(this.props.jobs.length);
},
renderNormal:function(){
return(
<div className="grid-4 department-block" data-dep-filter={this.state.hidden} data-loc-filter="false" data-department={this.props.title}><h3 className="text-uppercase">{this.props.title}</h3>
<div className="posting-list margin-bottom">
<h3 className="text-uppercase">{this.props.title}</h3>
</div>
</div>
)
},
renderEmpty:function(){
return(
<div className="grid-4 department-block" data-dep-filter={this.state.hidden} data-loc-filter="false" data-department={this.props.title}><h3 class="text-uppercase">{this.props.title}</h3>
<div className="posting-list margin-bottom">
<div class="no-posts job-post">
<p><em>0 Current Openings</em></p>
</div>
</div>
</div>
);
},
render: function(e){
if (this.hasJobs) {
return (
this.renderNormal()
)
}else{
return(
this.renderEmpty()
)
}
}
});
In the Department:componentWillMount function I want to check the jobs array passed to it from the DepartmentContainer:render function and set the state on said Department to either hasJobs true/false

Answer 1

#finalfreq has the right idea. This is an artifact of how the JavaScript console works (for Chrome at least). Values are generally only displayed/retrieved when you expand them, which can lead to some counter intuitive behavior. You must be adding elements to the array after you are logging it to the console.
Check it out:
I make an array and push something into it. Then I log it to console. Then I push a second element.
Now when I expand the previous logged Array, you'll see it now has the most up-to-date values. Except "Array[1]" doesn't update to "Array[2]"... and if you push another value into the array, the previously logged values won't change even if you collapse and expand them again.
The moral of the story is... don't rely on console.log too much hehe. But if you do, learn its quirks.