I am attempting to filter the data retrieved from my API based on text input from a search box. Despite exploring numerous resources and documentation about filtering, I haven’t found a suitable solution. My current implementation successfully displays the API data in both carousel and list formats, but the search functionality remains ineffective. How can I resolve this issue?
import { useNavigation } from '@react-navigation/native';
import React, { useEffect, useState } from 'react';
import { Dimensions, StyleSheet, TouchableOpacity, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { CarouselComponent, Header, SearchInput, ItemList, MapView } from '../components';
import { commonStyles, routes, colorTheme } from '../config';
import axios from 'axios';
export const NearbyLocations = () => {
const [apiData, setApiData] = useState(null);
const [filteredData, setFilteredData] = useState([]);
const [query, setQuery] = useState('');
const fetchApiData = async () => {
try {
const response = await fetch('https://example-api-url.com/listing');
const json = await response.json();
return json;
} catch (error) {
console.error(error);
}
};
useEffect(() => {
const loadData = async () => {
const data = await fetchApiData();
setApiData(data.data);
setFilteredData(data.data);
};
loadData();
}, []);
const handleSearch = (input) => {
setQuery(input);
const results = apiData.filter((entry) =>
entry.areaName.toUpperCase().includes(input.toUpperCase())
);
setFilteredData(results);
};
const [isCarousel, setCarousel] = useState(true);
const navigation = useNavigation();
const toggleView = () => {
setCarousel(!isCarousel);
};
const handleNavigation = (item) => {
navigation.navigate(routes.PROFILE, item);
};
return (
<SafeAreaView style={styles.container}>
<View style={styles.mapSection}>
<MapView style={{ width: '100%', height: '100%' }} />
<SearchInput
placeholder="Search by area"
value={query}
onChangeText={handleSearch}
style={styles.searchInput}
/>
</View>
<View style={styles.headerSection}>
<Header style={styles.header}>Activities</Header>
<TouchableOpacity onPress={toggleView}>
<Header style={{ ...styles.header, color: colorTheme.primary }}> {isCarousel ? 'Switch to List' : 'Switch to Carousel'} </Header>
</TouchableOpacity>
</View>
{isCarousel ? (
<CarouselComponent data={filteredData} onPress={handleNavigation} />
) : (
<ItemList data={filteredData} onPress={handleNavigation} />
)}
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
paddingHorizontal: commonStyles.padding(10),
},
mapSection: {
width: '100%',
height: Dimensions.get('window').height * 0.5,
},
searchInput: {
position: 'absolute',
top: 20,
width: '100%',
paddingLeft: commonStyles.padding(15),
backgroundColor: colorTheme.light,
color: colorTheme.dark,
},
header: {
fontSize: commonStyles.fontSize(14),
lineHeight: commonStyles.lineHeight(17),
},
headerSection: {
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: commonStyles.margin(20),
},
});