How can I conditionally change data on a flat list in React Native?

Question

in my app I have such scenario: when opening on first time I need to show all companies on screen, when user select a category I need to change the data of my FlatList to selected category companies. I use conditional select data for the FlatList but this is not working. here is my code:

const Home = (props) => {
  const dispatch = useDispatch();
  const companies = useSelector(state => state.companies.availableCompanies);
  const selectedCatCompanies = useSelector(state => state.selectedCatCompanies.availableSelectedCatCompanies)

  const loadCompanies = useCallback(async () => {
    await dispatch(CompaniesActions.fetchCompanies(1, 1, 1));
  }, [dispatch]);

  useEffect(() => {
    loadCompanies().then(() => {
      setIsLoading(false)
    })
  }, [dispatch, loadCompanies]);

  const renderCards = (itemData) => {
    return (
      <View style={styles.cardContainer}>
        <Card
          companyId={itemData.item.id}
          companyName={itemData.item.name}
          companyImage={itemData.item.image}
          companyMainAddress={itemData.item.mianAddress}
          companyPhoneNumber={itemData.item.telephoneNumber}
          companyDetails={itemData.item.details}
          onPress={() => { props.navigation.navigate('CardDetails')}}
        />
      </View>
    )
  }

  return (
    <SafeAreaView style={styles.screen}>
      <MainHeader />
      <SearchBar />
      <FlatList
        ListHeaderComponent={
          <>
            <Text style={styles.timeText}>Choose appropriate time:</Text>
            <View style={styles.timeContainer}>
              <PrimaryButton
                title='Choose a date'
                hasArrow={true}
                arrowSize={hp(2)}
              />
              <PrimaryButton
                title='Choose a time'
                hasArrow={true}
                arrowSize={hp(2)}
              />
            </View>
            <TypeSelection
              options={[
                { name: 'Premium', selected: false },
                { name: 'LifeStyle', selected: false },
                { name: 'Many Amenities', selected: false },
                { name: 'Gourment', selected: false },
              ]}
              selectedButtonStyles={styles.selectedButton}
              selectedButtonTextStyles={styles.selectedButtonText}
            />
          </>
        }
        nestedScrollEnabled={true}
        showsVerticalScrollIndicator={false}
        data={selectedCatCompanies == [] ? companies : selectedCatCompanies} //here is what I set 
        keyExtractor={item => item.id.toString()}
        renderItem={renderCards}
      />
    </SafeAreaView>
  )

and here is my screenshot for better understanding:

I get my companies from 2 different APIs. with this code I only get my companies when user select a category but if non category selected it will not show me the result. hope I explain my question well.

Answer 1

I don't have your full code so fishing here. From your code guessing, you are using Redux.

Step 1) change selectedCatCompanies == [] to selectedCatCompanies.length === 0 [Thanks to Linda's input in the comment I modified this step 1]

If step 1 does not work out then,

Step 2) Try looking at CompaniesActions action creator and its corresponding reducer to confirm if you are handling both the use cases of companies and selectedCatCompanies. I think the issue should be in the actions/reducer.

If step 2 does not work out then,

Step 3) I would console.log the selectedCatCompanies state to validate if it is being recorded correctly in Redux. If not I would then go back to step 2.

If step 3 also does not work out then,

Step 3) If you are successfully logging the selectedCatCompanies state then you can try to conditionally two different FlatLists instead of trying to conditionally render two different data sources.