reactjs Uncaught TypeError: Cannot read property 'map' of undefined

I have used getInitialState on my BrowseWidgetBox component. Although when passing the data to my MainMenu component, the data remains empty, as if the AJAX call to the api was never run in the BrowseWidgetBox.

My question then, is why is this happening? Shouldn't componentDidMount call the ajax api and re-set the state to include the contents of the ajax call? I want the state of my groupsData and my itemData to be present when the page is initially loaded. I am a bit worried that getInitialState is hindering the calls to ajax at least 'initially' which is causing my error.

Here is the full code of the two components:

var MainMenu = React.createClass({
                render: function() {
                    console.log(this.props.groupsData);   // console.log here 
                    var categories = this.props.groupsData.objects.map(function(obj){
                        return (<li>obj.description</li>);   
                    });
                    return (<div className="MainMenu">
                            <ul>{categories}</ul>

                        </div>);
                }
            });

var BrowseWidgetBox = React.createClass({
                getInitialState: function () {
                      return {groupsData: {}, itemsData: {}};
                },
                getGroupsApi: function(){
                    $.ajax({
                        url: this.props.groupsApi,
                        dataType: 'json',
                        type: 'GET',
                        success: function(groupsData){
                            this.setState({groupsData: groupsData});
                            console.log(groupsData)     // Console.log here 
                        }.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="http://this/is/a/good/url" itemsApi="http://this/is/a/good/api/call" />, document.getElementById('widget-container')
                );