Create on page filter for dynamically fetched content

[john-hemlane]

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link

Builder.io: Drag and drop page builder and CMS

Builder public api key
f30ea2dc70314252bac4eb26498700ee

What are you trying to accomplish
I would like to create an on-page filter that hides or shows the respective posts if the tags array on the post “item”

Screenshots or video link
G Drive Video link

Code stack you are integrating Builder with

NextJS, react, Ghost CMS

Description
I would like create a filter with click event bindings that hides or shows the posts on the page if the “post” contains a tag matching the value of the text clicked on.

Pseudo Code

posts.filter(({tags}) => tags.name.includes("text clicked on"))

[sarah]

Hi @john-hemlane, no problem! Here is how you can make this 100% in Builder:

1. Assuming you have already fetched your CMS data, create a grid of repeating posts using the “Repeat for each” feature in the data tab to create an article card for each post. Inside the article card, we can add a title, a “Tags” label, and a box where we can show the tags for that article. Above the grid, add a button that we can use to toggle the filter.

(add this to the Article Card layer)

2. Add an element bindings to the title layer in the data tab to show the title. For the box layer inside of the article card, we can add another “Repeat for each” to repeat for each article tag. Then we can bind the Tag layer to the tag name so we can see each tag for that article (and verify our filter is working).

(add this to the Title layer)

(add this to the Box layer inside the article card)

(add this to the Tag layer inside the Box)

3. Add an on-click action to the button to toggle the state. For example, we could set the button to toggle state.rentalFilter.
   

   

4. Add a new ShowIf element binding to the Article Card layer and add the code below. Replace "#rental-process-101" with whichever tag you want to target.

if(state.rentalFilter){
    for(let i = 0; i < state.postsItem.tags.length; i++){
        if(state.postsItem.tags[i].name === "#rental-process-101"){
            return true
        }
    }
    return false
} else {
    return true
}

Now the button should toggle between showing all articles and ones that have the “#rental-process-101” tag.