如何将搜索功能应用于具有可变子成员的 SectionList？

Question

Here I am providing a small list to showcase the type of data I get, some lists are way big with multiple sections and multiple child objects. I have a search box on top of the SectionList and the list must only display the data according to the Search Query. The List must sort real-time. I have tried some solutions but the main problem seems to be the filtering logic. Any help is welcome. Thanks in advance.

sectionData = 
[
    {
        "GroupName": "Otopulse", 
        "data": [
                    {
                        "CurrentSpeed": 0.01,
                        "LastUpdatedDate": "20 Jun, 2021",
                        "LastUpdatedTime": "08:29 AM",
                        "VehicleId": 1210,
                        "VehicleName": "AhmedGMC", 
                        "VehicleStatus": "PARKED", 
                        "VehicleType": "Car"
                    }
                ]
    }, 
    
    {
        "GroupName": "Unassigned", 
        "data": 
                [
                    {
                        "CurrentSpeed": 1,
                        "LastUpdatedDate": "19 Jun, 2021", 
                        "LastUpdatedTime": "03:35 PM",
                        "VehicleId": 1715, 
                        "VehicleName": "Khalil", 
                        "VehicleStatus": "OFFLINE", 
                        "VehicleType": "Car"
                    }, 
                    {
                        "CurrentSpeed": 1, 
                        "LastUpdatedDate": "29 Dec, 2020", 
                        "LastUpdatedTime": "09:57 AM",
                        "VehicleId": 1697, 
                        "VehicleName": "Nazir test", 
                        "VehicleStatus": "OFFLINE", 
                        "VehicleType": "Car"
                    }
                ]
    }       
]

Answer 1

This answer is for anyone who wishes to implement Search/Filter functionality on a SectionList in React Native. I used a library: React Native Searchable List, see it here . It is a fairly easy library to implement. See my implementation: Please take a note of my section data from the issue statement above

const [data, setData] = useState([]);
const [searchTerm, setSearchTerm] = useState('');
const [searchAttribute, setSearchAttribute] = useState('VehicleName');
const [ignoreCase, setIgnoreCase] = useState(true);

<TextInput
    style={styles.searchInputBox}
    placeholder="Search"
    onChangeText={setSearchTerm}
    value={searchTerm}
/>

<SearchableSectionList
    ItemSeparatorComponent={FlatListItemSeparator}
    sections={data}
    searchTerm={searchTerm}
    searchAttribute={searchAttribute}
    searchByTitle={false}
    ignoreCase={ignoreCase}
    keyExtractor={(item, index) => item + index}
    renderItem={({item}) => <VehiclesListItem item={item} />}
    renderSectionHeader={({section: {GroupName}}) => (
      <View
        style={{
          backgroundColor: '#dadada',
          padding: 10,
        }}>
        <Text style={{color: '#2A2A2A', fontSize: 15}}>{GroupName}</Text>
      </View>
    )}
  />

Thanks, take care. Happy Coding!!