geraldjtorres geraldjtorres - 5 months ago 19
Javascript Question

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

Answer

I believe I have a working version for you. I changed some syntax and variable/prop names for clarity and added comments explaining changes.

const React = require('react');
const ReactDOM = require('react-dom');
const axios = require('axios');

// These should probably be imported from a constants.js file
const CATEGORIES_ENDPOINT = 'https://api.gousto.co.uk/products/v2.0/categories';
const PRODUCTS_ENDPOINT = 'https://api.gousto.co.uk/products/v2.0/products?includes[]=categories&includes[]=attributes&sort=position&image_sizes[]=365&image_sizes[]=400&period_id=120';

const NavContainer = React.createClass({
  // All your state lives in your topmost container and is
  // passed down to any component that needs it
  getInitialState() {
    return {
      categories: [],
      items: [],
      selectedCategory: null
    }
  },

  // Generic method that's used to set a selectedCategory
  // Can now be passed into any component that needs to select a category
  // without needing to worry about dealing with events and whatnot
  selectCategory(category) {
    this.setState({
      selectedCategory: category
    });
  },

  componentDidMount() {
    this.serverRequest = axios.all([
      axios.get(CATEGORIES_ENDPOINT),
      axios.get(PRODUCTS_ENDPOINT)
    ])
    .then(axios.spread((categoriesResponse, itemsResponse) => {
      console.log('Categories', categoriesResponse.data.data);
      console.log('Item', itemsResponse.data.data);

      // This `this` should work due to ES6 arrow functions
      this.setState({
        categories: categoriesResponse.data.data,
        items : itemsResponse.data.data
      });
    }));
  },

  componentWillUnmount() {
    this.serverRequest.abort();
  },

  render() {
    // ABD: Always Be Destructuring
    const {
      categories,
      items,
      selectedCategory
    } = this.state;

    return (
      <div className="navigation">
        <h1>
          Store Cupboard
        </h1>

        <NavigationCategoryList
          categories={categories}
          // Pass the select function into the category list
          // so the category items can call it when clicked
          selectCategory={this.selectCategory} />

        <NavigationSubCategoryList
          items={items}
          // Pass the selected category into the list of items
          // to be used for filtering the list
          selectedCategory={selectedCategory} />
      </div>
    );
  }
});

const NavigationCategory = React.createClass({
  // Prevent natural browser navigation and
  // run `selectCategory` passed down from parent
  // with the id passed down from props
  // No querying DOM for info! when props have the info we need
  handleClick(e) {
    const { id, selectCategory } = this.props;
    // Handle the event here instead of all the way at the top
    // You might want to do other things as a result of the click
    // Like maybe:
    // Logger.logEvent('Selected category', id);
    e.preventDefault();
    selectCategory(id);
  },

  render() {
    const { id, title } = this.props;
    return (
      <div className="navigationLink">
        <a href={id} onClick={this.handleClick}>
          {title}
        </a>
      </div>
    );
  }
});
const NavigationCategoryList = React.createClass({
  // If you put your mapping method out here, it'll only
  // get instantiated once when the component mounts
  // rather than being redefined every time there's a rerender
  renderCategories() {
    const { selectCategory, categories } = this.props;

    return categories.map(category => {
      const { id, title } = category;
      return (
        <NavigationCategory
          // Every time you have a list you need a key prop
          key={id}
          title={title}
          id={id}
          selectCategory={selectCategory} />
      );
    });
  },

  render() {
    return (
      <div>
        <div className="navigationCategory">
          {this.renderCategories()}
        </div>
      </div>
    );
  }
});

const NavigationSubCategoryLink = React.createClass({
  render() {
    const { name } = this.props;
    return (
      <div className="navigationSubCategory" id={name}>
        {name}
      </div>
    );
  }
});
const NavigationSubCategoryList = React.createClass({
  renderSubCategories() {
    const { selectedCategory, items } = this.props;
    return items
    // This is the key to filtering based on selectedCategory
    .filter(item => {
      // Checking all the categories in the item's categories array
      // against the selectedCategory passed in from props
      return item.categories.some(category => {
        return category.id === selectedCategory;
      });
    })
    // After filtering what you need, map through
    // the new, shorter array and render each item
    .map(item => {
      const { title, link, id } = item;
      return (
        <NavigationSubCategoryLink
          key={id}
          name={title}
          link={link} />
      );
    });
  },

  render() {
    return (
      <div className="subCategoryContainer">
        {this.renderSubCategories()}
      </div>
    );
  }
});

ReactDOM.render(<NavContainer />, document.getElementById('app'));

The two key parts for filtering here are the .filter() and .some() methods on arrays.

You'll also notice I made named methods on the List components for mapping through the list items. This is so the functions only get defined once when the component mounts and don't get redefined every time the component re-renders. I think it also reads a bit nicer and adds more semantics to the code.

Edit: I noticed you were using Babel so I ES6'd it up a bit. <3 ES6.