# Rendering content based on filter?

**URL:** <https://discuss.hotwired.dev/t/rendering-content-based-on-filter/106>\
**Category:** General\
**Created:** [February 18, 2018, 11:37am UTC](https://discuss.hotwired.dev/t/rendering-content-based-on-filter/106 "2018-02-18T11:37:39Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![vipin](https://avatars.discourse-cdn.com/v4/letter/v/edb3f5/32.png) [@vipin](https://discuss.hotwired.dev/u/vipin)\
**Post date:** [February 18, 2018, 11:37am UTC](https://discuss.hotwired.dev/t/rendering-content-based-on-filter/106/1 "2018-02-18T11:37:39Z")

</div>

Currently i have a filter which hides and shows divs (using CSS & JS) based on data attributes matching the filter. Is there a way to use stimulus to just render the elements that match the filters? ![filters](https://canada1.discourse-cdn.com/flex027/uploads/stimulusjs/original/1X/04097e33a7cf99ac16891d74ac594dcfca7471e9.gif)

---

<div class="post-metadata">

**Author:** ![smidwap](https://avatars.discourse-cdn.com/v4/letter/s/57b2e6/32.png) [@smidwap](https://discuss.hotwired.dev/u/smidwap)\
**Post date:** [February 19, 2018, 1:43am UTC](https://discuss.hotwired.dev/t/rendering-content-based-on-filter/106/2 "2018-02-19T01:43:53Z")

</div>

I recently built a similar filtering feature with Rails. I don’t know your exact requirements, but you might consider filtering results server-side and returning the rendered matches instead of using Javascript. Your feature could be a lot easier to build that way.

But if you’re loading all of the results on initial page load and happy with filtering from there, then you could store the filters’ values somewhere (e.g. a global javscript variable) and trigger an event anytime a filter is updated.

Then each result (trip) can be hooked up to a Stimulus controller that listens to that event and toggles the element depending on whether the trip matches the filters.

The HTML might look like this:

```auto
<article class="trip" data-controller="trip" data-trip-price="...">...</article>

```

And the accompanying Stimulus controller (trip\_controller.js):

```javascript
import { Controller } from "stimulus"

export default class extends Controller {
  connect() {
    window.addEventListener("filter-update", this.toggle)
  }

  toggle = () => {
    if (this.matchesFilters()) {
      this.element.style.display = ""
    } else {
      this.element.style.display = "none"
    }
  }

  matchesFilters() {
    // filter matching logic here
  }
}

```

I’m doing something similar to show/hide the columns in a table based on the person’s choice of what columns to display.

Hope this helps.

---

<div class="post-metadata">

**Author:** ![vipin](https://avatars.discourse-cdn.com/v4/letter/v/edb3f5/32.png) [@vipin](https://discuss.hotwired.dev/u/vipin)\
**Post date:** [February 19, 2018, 8:59am UTC](https://discuss.hotwired.dev/t/rendering-content-based-on-filter/106/3 "2018-02-19T08:59:35Z")

</div>

Thanks @smidwap  
That is what i am currently doing but in vanilla javascript(display:none), but was curious if using stimulus can help me do something like a state change?

---

<div class="post-metadata">

**Author:** ![smidwap](https://avatars.discourse-cdn.com/v4/letter/s/57b2e6/32.png) [@smidwap](https://discuss.hotwired.dev/u/smidwap)\
**Post date:** [February 19, 2018, 2:07pm UTC](https://discuss.hotwired.dev/t/rendering-content-based-on-filter/106/4 "2018-02-19T14:07:16Z")

</div>

Check out the [Managing State chapter](https://stimulusjs.org/handbook/managing-state) in the Stimulus Handbook. From my experience, Stimulus doesn’t do a lot of magic out-of-the-box like respond to state change. Where Stimulus has been a big help is turning my spaghetti code into more comprehensible and flexible components (controllers) with little to no learning curve.