So i have these two arrays, category: ["All","First","Second"] and cards: [ { id: 1, icon: require("../../../assets/logo.png"), title: 'Title', category: 'First', }, { id: 2, icon: require("../../../assets/logo.png"), title: 'Second Title', category: 'Second', } ] and a Picker to select a category value

And what i want to do is render a Flatlist that shows items chosen with the Picker. Basically, somewhat of a filter/category.

How could i go about this?

1 Answers

0
Community On

you can have a state that stored the current selected category and then using the selected category for filtering the cards.

e.g.

state = {
  selected: 'All',
  data: cards,
}

setCategory = (newCategory) => {
  const newData = tab === 'All'
    ? cards
    : tab === 'First'
      ? cards.filter(i => i.category === 'First')
      : cards.filter(i => i.category !== 'Second')
  this.setState({ selected: newCategory, data: newData })
}

render() {
 return (
  <FlatList data={data} extraData={selected} />
 )
}

This is just one of the solution, there are many ways to handle it.