UI Image

Here, I want to filter Flatlist data as per top categories and button should be multi-selected.

FlatList data is HotelData array and above categories is also one array that is used inside scrollview using map function.

so by selecting multiple categories i want to filter Flatlist data, so if anyone has done this task, please help me for the same.

const HotelData = [
{
  id: '1',
  img: require('../Assets/UIPracticeImage/H1.jpg'),
  name: 'Chef Vincent',
  desc: 'Lorem ipsum dolor sit amet aliquon sciscilant',
  tag: 'Toutes possibilities',
  compareKey: 1,
},
{
  id: '2',
  img: require('../Assets/UIPracticeImage/H2.jpg'),
  name: 'Pine hill green caben',
  desc: 'Lorem ipsum dolor sit amet aliquon sciscilant',
  tag: 'Restaurants',
  compareKey: 2,
},
{
  id: '3',
  img: require('../Assets/UIPracticeImage/H3.jpg'),
  name: 'Sky Palace',
  desc: 'Lorem ipsum dolor sit amet aliquon sciscilant',
  tag: 'Restaurants',
  compareKey: 2,
},
{
  id: '4',
  img: require('../Assets/UIPracticeImage/H4.jpg'),
  name: 'Green leaf',
  desc: 'Lorem ipsum dolor sit amet aliquon sciscilant',
  tag: 'Toutes possibilities',
  compareKey: 1,
},
{
  id: '5',
  img: require('../Assets/UIPracticeImage/H1.jpg'),
  name: 'Pine green leaf',
  desc: 'Lorem ipsum dolor sit amet aliquon sciscilant',
  tag: 'Bars',
  compareKey: 3,
 },
];
const [categories, setCategories] = useState([
  {name: 'Toutes possibilités', key: 1, isCheck: false, compareKey: 1},
  {name: 'Restaurantes', key: 2, isCheck: false, compareKey: 2},
  {name: 'Bars', key: 3, isCheck: false, compareKey: 3},
]);

CodePudding user response：

You can use this:

const HotelData = [
{
  id: '1',
  img: require('../Assets/UIPracticeImage/H1.jpg'),
  name: 'Chef Vincent',
  desc: 'Lorem ipsum dolor sit amet aliquon sciscilant',
  tag: 'Toutes possibilities',
  compareKey: 1,
},
{
  id: '2',
  img: require('../Assets/UIPracticeImage/H2.jpg'),
  name: 'Pine hill green caben',
  desc: 'Lorem ipsum dolor sit amet aliquon sciscilant',
  tag: 'Restaurants',
  compareKey: 2,
},
{
  id: '3',
  img: require('../Assets/UIPracticeImage/H3.jpg'),
  name: 'Sky Palace',
  desc: 'Lorem ipsum dolor sit amet aliquon sciscilant',
  tag: 'Restaurants',
  compareKey: 2,
},
{
  id: '4',
  img: require('../Assets/UIPracticeImage/H4.jpg'),
  name: 'Green leaf',
  desc: 'Lorem ipsum dolor sit amet aliquon sciscilant',
  tag: 'Toutes possibilities',
  compareKey: 1,
},
{
  id: '5',
  img: require('../Assets/UIPracticeImage/H1.jpg'),
  name: 'Pine green leaf',
  desc: 'Lorem ipsum dolor sit amet aliquon sciscilant',
  tag: 'Bars',
  compareKey: 3,
 },
];
const [filterHotels, setFilterHotels] = useState(HotelData);
const [categories, setCategories] = useState([
  {name: 'Toutes possibilités', key: 1, isCheck: false, compareKey: 1},
  {name: 'Restaurantes', key: 2, isCheck: false, compareKey: 2},
  {name: 'Bars', key: 3, isCheck: false, compareKey: 3},
]);

const [selectedCategories, setSelectedCategories] = useState([]);


const toggleCategory = (category) => {
   const idx = selectedCategories.findIndex(item => item.key === category.key);
   const temp = [...selectedCategories];
   if (idx > -1) { 
     temp.splice(idx, 1);
  } else {
      temp.push(category);
   }
     setSelectedCategories(temp);
}

useEffect(() => {
   HotelData.filter((el) => {
  return setSelectedCategories.some((f) => {
    return f.name === el.tag && f.compareKey === el.compareKey;
  });
});
}, [selectedCategories]
return (
  <FlatList data={filterHotels} renderItem={renderItem} />
 );