I have two different flatlists: countries and states. I want to utilize the search bar so that the user can search a country or a state name. In the value prop for the search bar, you can only pass in one value. Is there a way to put multiple values or is there another way to do this?
Current code:
const SearchBarCustom = (props) => { return <SearchBar {...props} />;};function SearchScreen({ navigation: { navigate } }) { const [filteredCountryData, setFilteredCountryData] = useState<any>(); const [masterCountryData, setMasterCountryData] = useState([]); const [filteredStateData, setFilteredStateData] = useState<any>(); const [masterStateData, setMasterStateData] = useState([]); const [countrySearch, setCountrySearch] = useState(""); const [stateSearch, setStateSearch] = useState(""); useEffect(() => { fetchCountryData(); return () => {}; }, []); useEffect(() => { fetchStateData(); return () => {}; }, []); const fetchCountryData = () => { const apiURL = "https://coronavirus-19-api.herokuapp.com/countries"; fetch(apiURL) .then((response) => response.json()) .then((responseJson) => { setFilteredCountryData(responseJson); setMasterCountryData(responseJson); }) .catch((error) => { console.error(error); }); }; const fetchStateData = () => { const apiURL ="https://api.covidactnow.org/v2/states.json?apiKey=fac351e08be8429da56ccddb711aaa9a"; fetch(apiURL) .then((response) => response.json()) .then((responseJson) => { setFilteredStateData(responseJson); setMasterStateData(responseJson); }) .catch((error) => { console.error(error); }); }; const SearchFilter = (text) => { if (text) { const newCountryData = filteredCountryData.filter((item) => { const itemCountryData = item.country; const textCountryData = text.toUpperCase(); return itemCountryData.indexOf(textCountryData) > -1; }); setFilteredCountryData(newCountryData); setCountrySearch(text); } else { setFilteredCountryData(masterCountryData); setCountrySearch(text); } if (text) { const newStateData = filteredStateData.filter((item) => { const itemStateData = item.state; const textStateData = text.toUpperCase(); return itemStateData.indexOf(textStateData) > -1; }); setFilteredStateData(newStateData); setStateSearch(text); } else { setFilteredStateData(masterStateData); setStateSearch(text); } }; const ItemCountryView = ({ item }) => { return (<RectButton onPress={() => navigate("LocationDataScreen", { cases: item.cases, deaths: item.deaths, name: item.country, }) }><Icon name="search" size={20} color="gray" /><Text style={[styles.itemStyle, { textTransform: "capitalize" }]}> {item.id} {item.country.toUpperCase()}</Text></RectButton> ); }; const ItemStateView = ({ item }) => { const getCircleColor = (item) => { if (item.riskLevels.overall === 4) return "#B51A00"; if (item.riskLevels.overall === 3) return "#FF3B30"; if (item.riskLevels.overall === 2) return "#FF9500"; if (item.riskLevels.overall === 1) return "#FFCC00"; return "#34C759"; }; return (<RectButton onPress={() => navigate("LocationDataScreen", { name: item.state, stateCases: item.actuals.cases, }) }><Text style={[styles.itemStyle, { textTransform: "capitalize" }]}> {item.id} {item.state}</Text><View style={{ width: 10, height: 10, borderRadius: 20, backgroundColor: getCircleColor(item), }}></View></RectButton> ); }; const ItemSeparatorView = () => { return (<View style={{ height: 1.5, width: "90%", marginLeft: 35, backgroundColor: "#f3f2f8", }} /> ); }; return (<ScrollView contentInsetAdjustmentBehavior="automatic" stickyHeaderIndices={[0]} style={[styles.container, { flex: 1 }]}><SearchBarCustom value={countrySearch} placeholder="Counties, States, Countries, and More" searchIcon={() => <Icon name="search" size={16} color="grey"></Icon>} containerStyle={{ backgroundColor: "#f3f2f8" }} inputContainerStyle={{ backgroundColor: "#e3e3e9", height: 25, marginTop: -5, }} placeholderTextColor="#96969b" platform="ios" onChangeText={(text) => SearchFilter(text)} /><Text>Countries</Text><FlatList data={filteredCountryData} keyExtractor={(item, index) => index.toString()} ItemSeparatorComponent={ItemSeparatorView} renderItem={ItemCountryView} style={styles.listcontainer} /><Text>States</Text><FlatList data={filteredStateData} keyExtractor={(item, index) => index.toString()} ItemSeparatorComponent={ItemSeparatorView} renderItem={ItemStateView} style={styles.listcontainer} /></ScrollView> );}