I have a React app that consumes a nested JSON object retrieved by an sync AJAX call. On return of the call, I traverse the JSON and bind each of the packets of data the components need to individual state variables.
I then call the components in render - also nested - and pass them the data they and their children need as props.
Passing individual values works well via <SubComponent dataToUse={this.props.value} />
However when I pass an array and attempt to .map that array in the component, the browser console gives me the error:
Cannot read property 'map' of undefined
...which obviously seems that the array is not actually there - since it is in render, perhaps it is running map before the AJAX call returns the JSON file? However, if I stringify the array data when binding it to state and pass that, the whole array of data is there, as a string.
If I take that string and parse it back into JSON, I get this:
Unexpected token u in JSON at position 0
Which again suggests that the data is NOT there.
Suffice it say, I am confused. I can easily pass single data variables down my app hierarchy as props but cannot access arrays.
Has anyone else had this sort of problem?
Edit; some code:
My top most component makes an AJAX call with JQuery:
$.ajax({
type: 'GET',
url: "/api/" + eventCode,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({updateList: data.updates});
}.bind(this)
});
This AJAX call sits in its own function and is called every 30 seconds here:
componentDidMount: function() {
this.loadCommentsFromServer();
var refreshInterval = 32000; // take this from the blob!
setInterval(this.loadCommentsFromServer, refreshInterval);
},
The render function is as follows:
render: function() {
return (
<div id='App'>
<UpdateList updateData={this.state.updateList}/>
</div>
)
}
The UpdateList component is as follows:
var UpdateList = React.createClass({
render: function() {
return (
<div id='UpdateList'>
Update list:
<ul>
{
this.props.updateData.map(function(update, i){
return <Updates singleUpdate={this.props.updateData[i]}/>
})
}
</ul>
</div>
)
}
});
If add a simple test array in getInitialState, the array is mapped and the Updates component renders each item just as desired.
this.state.updateListin the topmost render method?updateList: []on thegetInitialState?