ApathyBear ApathyBear - 5 months ago 45
Ajax Question

Reactjs this.state giving Uncaught TypeError: Cannot read property 'groupsData' of null

I am doing 2 basic ajax calls to 2 different apis in one of my ReactJs components. Although, when running the call (on urls I know for certain are working and returning data), I receive:

Uncaught TypeError: Cannot read property 'groupsData' of null


Here is the single component:

var BrowseWidgetBox = React.createClass({
getGroupsApi: function(){
$.ajax({
url: this.props.groupsApi,
dataType: 'json',
type: 'GET',
success: function(groupsData){
this.setState({groupsData: groupsData});
}.bind(this),
error: function(xhr, status, err){
console.error(this.props.groupsApi ,status, err.toString());
}.bind(this)
});

},
getItemsApi: function() {
$.ajax({
url: this.props.itemsApi,
dataType: 'json',
type: 'GET',
success: function(itemsData){
this.setState({itemsData: itemsData});
}.bind(this),
error: function(xhr, status, err){
console.error(this.props.groupsApi ,status, err.toString());
}.bind(this)
});
},
componentDidMount: function() {
this.getGroupsApi();
this.getItemsApi();
},
render: function() {
return (<div className="BrowseWidgetBox">
<MainMenu groupsData={this.state.groupsData} itemsData={this.state.itemsData} />
<Display />
</div>);
}
});



React.render(
<BrowseWidgetBox groupsApi="/*imagine a working url here*/" itemsApi="/*imagine a working url here*/" />, document.getElementById('widget-container')
);


Is there something obvious I am missing in terms of reactJS/ ajax?

Answer

You should add getInitialState method to your component, where you should set initial state

var BrowseWidgetBox = React.createClass({
   getInitialState: function () {
      return {groupsData: {}, itemsData: {}};
   },
   // your code
});