I have a SectionList in the Support.js:

import React, {useState} from 'react';
import { StyleSheet, View, Text, Dimensions, StatusBar, SectionList, Pressable, Linking } from 'react-native';
import { DrawerActions } from '@react-navigation/native';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import Feather from 'react-native-vector-icons/Feather';

import Main from './Main'
import SearchBar from './SearchBar';

const WINDOW_HEIGHT = Dimensions.get('window').height;
const DATA = [
    {
      title: "Stanbul",
      data: [<Text onPress={()=>{Linking.openURL('tel:Phone number');}}>Phone number</Text>]
    },
    {
      title: "Antalya",
      data: [<Text onPress={()=>{Linking.openURL('tel:Phone number');}}>Phone number</Text>]
    },
    {
      title: "Rome",
      data: [<Text onPress={()=>{Linking.openURL('tel:Phone number');}}>Phone number</Text>]
    },
    {
      title: "Milano",
      data: [<Text onPress={()=>{Linking.openURL('tel:Phone number');}}>Phone number</Text>]
    }
  ];
  
const Item = ({ title }) => (
    <View style={styles.item}>
        <Text style={styles.title}>{title}</Text>
    </View>
);

export default function Support({ navigation }) {
    const [searchPhrase, setSearchPhrase] = useState("");
    const [clicked, setClicked] = useState(false);

(item.toUpperCase().includes(searchPhrase.toUpperCase().trim().replace(/\s/g, ""))) {
          return <Item title={item}/>;
        }
    };

    return(
        <View style={styles.mainContainer}>
            <StatusBar backgroundColor={'#fdf38a'} barStyle='dark-content'/>
            <View style={styles.appBar}>
                <MaterialIcon name="menu" size={32} color="#2e2a00" backgroundColor={'none'} onPress={() => navigation.dispatch(DrawerActions.openDrawer())}/>
                <Text style={styles.appBarText}>Support</Text>
                <Feather name="x" size={32} color="#2e2a00" backgroundColor={'none'} onPress={() => navigation.navigate(Main)}/>
            </View>
            <View style={styles.mainContent}>
                <SearchBar
                    searchPhrase={searchPhrase}
                    setSearchPhrase={setSearchPhrase}
                    clicked={clicked}
                    setClicked={setClicked}
                />
                <SectionList
                    sections={DATA}
                    keyExtractor={(item, index) => item   index}
                    renderItem={({ item }) => <Item title={item} />}
                    renderSectionHeader={({ section: { title } }) => (<Text style={styles.header}>{title}</Text>)}
                />
            </View>
        </View>
    );
}

In the SectionList I have a name of the city and the phone number. How can I make it so that when I type in the name of the city in the search bar, only the corresponding item is displayed?

SearchBar is already written and it's a simple TextInput that takes 4 arguments:

clicked - state of clicked or not

setClicked - function to change the state of clicked

searchPhrase - currrent text in the TextInput

setSearchPhrase - function to change the searchPhrase

CodePudding user response：

You can filter the array you are using in the list based on the search input

sections={
   DATA.filter((city)=>city.title.toUpperCase().includes(searchPhrase.toUpperCase()))
}