Loving the new interactions and state release! Quick question - we want to use a select component to filter Contentstack data on a page. However, we want the select options to be populated by the same contentstack data. Is this possible?
Specifically - we have a collection of books in contentstack (which have titles, blurbs, authors etc) and I would like to have a select field on the product page that allows people to choose from the list of authors and filter the products
Hey @inviting_junglefowl! It’s not possible with our native integration with ContentStack because we only support filtering by id.
But, if you have a code component that allows querying by a non-id field, it’s possible to use the states and interactions to create such behavior.
(if you’re able to wait another week or so, we are also working on the ability to filter by other content stack fields!)
Thanks @yang and @samuel - we’re actually using our own version of the Contentstack fetcher and we built-in filtering by non-id fields. I’ve been playing around, and my current line of thought is to create an array state variable, populate that variable with the authors on page load, and then populate the select options? Am I on the right track?
Got it! I don’t think you need to do that, just place your select somewhere within your fetcher, and it will have access to the data that the fetcher fetched, and thus you should be able to set the options of the select to a dynamic value (where you are picking that list of authors). Let me know if that makes sense!
The contentstack fetcher maps over the entries returned with repeatedElement(), so the select field ends up being duplicated oh so many times. This morning I added a prop & control to provide data without mapping over it, and it looks like that worked!
That’s exactly right - by default it creates repeated children, but (as a convention) we typically add a noAutoRepeat prop on our collection-fetching components that opts out of this behavior and makes it into a pure data provider