Filtering products with ReactJS


(Bart) #1

Hello, I’m kinda new to React. I know basics (i think…) but you know what ppl say. Practise makes perfect. So I want to do eCommerce site. Before I do anything, I like to think about it. So I’m wondering how to filer products basing on what user wants to see. Let’s look at an example:

User wants to see products with these parameters
size: 40, 42
color: red
price: < 100$

Now couple of questions:

  1. Should I filter products on server side or client side? I think the second option is much better.
  2. If client side - I need some filter function like Array.filter() but it needs to be dynamic. This is gonna be tough I guess…
  3. When should I update state? On every checkbox selected? Someone checks size 42 - reRendering. Another one size or color? - reRendering. So every one checkbox should be linked to filter function, right?

(Spyros Ioakeimidis) #2

Hi @XaooB! Indeed it is said that “repetition and practice is the prerequisite to mastery” :slight_smile:

  1. I think your intuition is right on this one, though it does depend on the requirements of the project. Filtering on the client side will potentially make the implementation more complicated. Performance might be impacted as well if you have thousands of products to filter. On the other hand, if the filtering functionality is implemented on the server side, then it can be shared between different clients, e.g. mobile and web.
  2. Assuming that filtering is implemented on the client side, your intuition is right on this one as well. Filtering will need to be somehow dynamic, depending on the selected filters.
  3. Assuming you have some kind of product list and that you are using controlled components for the checkboxes, the state will be updated when any checkbox is checked. Then you can use this value that is in the state, which should reflect the selected size, to filter the product list. You can do the filtering in the render method and render the filtered products. In this case, we don’t need to have one filter function per checkbox. Does this make sense?

Hope this helps!


(Shiva Nandan) #3

Doing the filtering client side or server side really depends on your data. If you are Amazon, with millions of products, it wouldn’t be ideal to download information about all those million products and filter and show client side… whereas if your product list is just a few hundreds or so, you can do the filter client-side.

I do something like this for dynamically filtering products client-side:

const ListRenderer = ({ list, minSize, maxSize, color, minPrice, maxPrice }) => {
  const minSizeFilter = minSize ? x => x.size > minSize : x => x;
  const maxSizeFilter = maxSize ? x => x.size < maxSize : x => x;
  const colorFilter = color ? x => x.color === color : x => x;
  const minPriceFilter = minPrice ? x => x.price > minPrice : x => x;
  const maxPriceFilter = maxPrice ? x => x.price > maxPrice : x => x;

  return <div>
    {list
      .filter(minSizeFilter)
      .filter(maxSizeFilter)
      .filter(colorFilter)
      .filter(minPriceFilter)
      .filter(maxPriceFilter)
      .map(item => {
        return <div>{item.something}</div>
      })}
  </div>
}