How to display different list of items when clicking on a category

I am quite new to React JS and I have this simple UI I need to build. I basically have a list of categories and if I click on a category, a list of items will display under that category. It will hide the list of items if I click on another category. I was provided two APIs, one containing the JSON of categories and another containing the items. I have managed to fetch the data from the APIs and spit them out on the DOM. However I am finding it hard to piece the component together to only display the right items when it's category has been clicked. I am using Babel to transpile my JSX syntax and uses axios to fetch the Data. At the moment my page only spits out all the items and all the categories. Understanding state is difficult for me. Any advice for a newbie Reactjs leaner? Thanks! My two APIs can be found in my code since I don't have enough rep points to post links. My JSX: var React = require('react'); var ReactDOM = require('react-dom'); var axios = require('axios'); var NavContainer = React.createClass({ getInitialState: function() { return { category: [], items: [] } }, // WHAT IS CURRENTLY SELECTED handleChange(e){ this.setState({data: e.target.firstChild.data}); }, componentDidMount: function() { // FETCHES DATA FROM APIS var th = this; this.serverRequest = axios.all([ axios.get('https://api.gousto.co.uk/products/v2.0/categories'), axios.get('https://api.gousto.co.uk/products/v2.0/products?includes[]=categories&includes[]=attributes&sort=position&image_sizes[]=365&image_sizes[]=400&period_id=120') ]) .then(axios.spread(function (categoriesResponse, itemsResponse) { //... but this callback will be executed only when both requests are complete. console.log('Categories', categoriesResponse.data.data); console.log('Item', itemsResponse.data.data); th.setState({ category: categoriesResponse.data.data, items : itemsResponse.data.data, }); })); }, componentWillUnmount: function() { this.serverRequest.abort(); }, render: function() { return ( <div className="navigation"> <h1>Store Cupboard</h1> <NavigationCategoryList data={this.state.category} handleChange={this.handleChange}/> <NavigationSubCategoryList data={this.state.category} subData={this.state.items} selected_category={this.state.data} /> </div> ) } }); var NavigationCategoryList = React.createClass({ render: function () { var handleChange = this.props.handleChange; // LOOPS THE CATEGORIES AND OUTPUTS IT var links = this.props.data.map(function(category) { return ( <NavigationCategory title={category.title} link={category.id} handleChange={handleChange}/> ); }); return ( <div> <div className="navigationCategory"> {links} </div> </div> ); } }); var NavigationSubCategoryList = React.createClass({ render: function () { var selected = this.props.selected_category; var sub = this.props.subData.map(function(subcategory) { if(subcategory.categories.title === selected) return ( <NavigationSubCategoryLinks name={subcategory.title} link={subcategory.link} /> ); }); return ( <div className="subCategoryContainer"> {sub} </div> ); } }); var NavigationSubCategoryLinks = React.createClass({ render: function () { return ( <div className="navigationSubCategory" id={this.props.name}> {this.props.name} </div> ); } }); var NavigationCategory = React.createClass({ render: function () { var handleChange = this.props.handleChange; return ( <div className="navigationLink"> <a href={this.props.link} onClick={handleChange}>{this.props.title}</a> </div> ); } }); ReactDOM.render(<NavContainer />, document.getElementById("app")); Here is a screenshot of what I have on my webpage so far. Everything just dumps on the screen. The links in blue are the categories. Screenshot of current web page