Skip to content
Get help on Slack

Creating a filtering system for speakers in Gatsby project

6 replies
Last updated: Jul 22, 2020
Hi! I'm working on my first Gatsby project, for a conference, and would like to create a filtering system for the speakers. I need it to be able to filter both sanity categories and tags. Similar to how they've done it here: https://ffconf.org/talks/ (click the "Filter Talks" button).Can anyone point me in the right direction/blogpost/video on how to do that?
Jul 22, 2020, 3:56 PM
put your speakers in a local state variable, something like:
const [players, setPlayers] = useState(data.players.edges.slice(0, 50))
then make a filter function that manipulates that state variable the way you want when a filter is clicked
Jul 22, 2020, 4:03 PM
also good to have your filters in another local state variable so you know which filters are active
const [filters, setFilters] = useState(null)
Jul 22, 2020, 4:05 PM
heres how my filter function looks for my use case
  function filter(teams) {
    if (filters === null) {
      const filtered = data.players.edges.filter(
        x => x.node.team._id === teams[0] || x.node.team._id === teams[1]
      )
      setPlayers(filtered)
      setFilters(teams)
    } else if (filters[0] === teams[0]) {
      setPlayers(data.players.edges.slice(0, 50))
      setFilters(null)
    } else {
      const filtered = data.players.edges.filter(
        x => x.node.team._id === teams[0] || x.node.team._id === teams[1]
      )
      setPlayers(filtered)
      setFilters(teams)
    }
  }
might not make total sense but a hint
🙂
Jul 22, 2020, 4:06 PM
Thank you, this is the kind of JS I need to get fluent in! I'm also getting some use out of the link
user L
posted earlier.
Jul 22, 2020, 4:09 PM
good luck! its totally worth the pain to learn this stuff :)
Jul 22, 2020, 4:14 PM
hehe thank you!
Jul 22, 2020, 4:15 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?