Thursday, June 23, 2016

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

Leave a Comment

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

4 Answers

Answers 1

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.

Answers 2

Clearly there are many ways to achieve what you want.

But here is an example of How I would personally layout a simple UI like that. I removed the API calls to provide a workable sample in CodePen below

class Nav extends React.Component {    constructor () {     super();      this.state = {       categories: [         { title: 'First Category', id: 0 },         { title: 'Second Category', id: 1 },         { title: 'Third Category', id: 2 }       ],       items: [         { title: 'Item 1', id: 0, category: { id: 0 } },         { title: 'Item 2', id: 1, category: { id: 0 } },         { title: 'Item 3', id: 2, category: { id: 0 } },         { title: 'Item 4', id: 3, category: { id: 1 } },         { title: 'Item 5', id: 4, category: { id: 1 } },         { title: 'Item 6', id: 5, category: { id: 2 } },         { title: 'Item 7', id: 6, category: { id: 2 } }       ],       selectedCategoryId: null     };      this.onSelectCategory = this.onSelectCategory.bind(this);   }    onSelectCategory(id) {     this.setState({       selectedCategoryId: id     });   }    render() {     const { categories, items, selectedCategoryId } = this.state;     const deafultCategory = _.first(categories);     const selectedCategory = _.find(categories, i => i.id === selectedCategoryId) || deafultCategory;         return (       <div>         <CategoryFilter categories={categories} onSelectCategory={this.onSelectCategory} />         <ItemList items={items} selectedCategory={selectedCategory} />       </div>     );   } }  var CategoryFilter = ({ categories, onSelectCategory}) => {   const links = categories.map(i => (     <div key={i.id}>       <a href="#" onClick={() => onSelectCategory(i.id)}>         { i.title }       </a>     </div>   ));   return (     <div>       { links }     </div>   ) };  var ItemList = ({items, selectedCategory}) => {   const currentItems = items     .filter(i => i.category.id === selectedCategory.id)     .map(i => (       <div key={i.id}>         { i.title }       </div>     ));   return (     <div>       { currentItems }      </div>   ); };   ReactDOM.render(<Nav />, document.getElementById("app")); 

http://codepen.io/chadedrupt/pen/pbNNVO

Hopefully it is pretty explanatory.

Note. Used a lot of ES6 stuff as I think its really worth learning as it makes everything so much more pleasant. Also mixed a bit of Underscore/Lodash in as well.

Answers 3

Try this....

const React = require('react'); const ReactDOM = require('react-dom'); const axios = require('axios');  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({   getInitialState() {     return {       categories: [],       items: [],       selectedCategory: null     }   },    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.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}           selectCategory={this.selectCategory} />          <NavigationSubCategoryList           items={items}           selectedCategory={selectedCategory} />       </div>     );   } });  const NavigationCategory = React.createClass({   handleClick(e) {     const { id, selectCategory } = this.props;     // 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({   renderCategories() {     const { selectCategory, categories } = this.props;      return categories.map(category => {       const { id, title } = category;       return (         <NavigationCategory           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       return item.categories.some(category => {         return category.id === selectedCategory;       });     })     .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')); 

Answers 4

$(function(){   $('ul li a').click(function(e){     e.preventDefault();     var category = $(this).text().toLowerCase().split("&");     if(category[0]=="view all")     {       $('ul.category li').show();     }     else     {        //hide all categories        $('ul.category li').hide();        $.each(category, function(i, v){          $('ul.category li.'+v.trim()+"-1").show();        });     }   });  }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ul>  <li><a href="">View All</a></li> <li><a href="">Fruits</a></li> <li><a href="">Vegetables</a></li> <li><a href="">Nuts</a></li> <li><a href="">Desserts & Cakes</a></li>  </ul>  <ul class="category"> <li class="fruits-1 nuts-0 vegetables-1 desserts-1">Product 1</li> <li class="fruits-0 nuts-1 vegetables-0 desserts-1">Product 2</li> <li class="fruits-1 nuts-1 vegetables-1 desserts-0">Product 3</li> <li class="fruits-0 nuts-1 vegetables-0 desserts-0">Product 4</li> <li class="fruits-1 nuts-0 vegetables-1 desserts-0">Product 5</li> <li class="fruits-0 nuts-1 vegetables-0 desserts-0">Product 6</li> <li class="fruits-0 nuts-0 vegetables-0 desserts-1">Product 7</li> <li class="fruits-1 nuts-0 vegetables-1 desserts-0">Product 8</li> </ul> 
If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment