как мне выбрать элемент в представлении списка с помощью item.description

#javascript #react-native

#javascript #react-native

Вопрос:

вот приложение, я хочу создать разные экраны с разными категориями, в данном случае у меня есть дерматолог и больница, как я могу выбрать только одно описание

  const [state, setState] = useState({
     places: [
       {
         id: 1,
         title: 'Clinica da pele',
         description: 'Dermatologista',
         latitude:-2.42206406,
         longitude:-54.71947789,
       },
       {
         id: 2 ,
         title:'Unimed',
         description:'Hospital',
         latitude:-2.42501721,
         longitude:-54.71146077,
        },
       {
         id: 3,
         title: 'Dra. Josimar',
         description:'Dermatologista',
         latitude: -2.4288346,
         longitude:-54.7290553,
       }
     ]
   });

   return(
  

Я просто хочу выбрать элементы с описанием == dermatologista
как я могу это сделать?

    <SafeAreaView>
        <FlatList
     styles = {styles.PlaceContainer}
     showsVerticalScrollIndicator
     data={state.places}
     keyExtractor={item => item.id}
     renderItem={({ item }) => {
       return(
         <View key={item.id} style={styles.place} >
           <Text>{item.title}</Text>
           <Text>{item.description}</Text>
         </View>
       )

     }
 

}
/>

</SafeAreaView>

  
  
   
  

)
}

Ответ №1:

Вы можете использовать array.filter :

 const filteredPlaces = state.places.filter( place => place.description === "Dermatologista" )
  

и передать filteredPlaces вместо всего объекта дочернему компоненту.

Ответ №2:

Попробуйте это

 <SafeAreaView>
        <FlatList
     styles = {styles.PlaceContainer}
     showsVerticalScrollIndicator
     data={state.places}
     keyExtractor={item => item.id}
     renderItem={({ item }) => {
       item.description == "dermatologista" ? (
         <View key={item.id} style={styles.place} >
           <Text>{item.title}</Text>
           <Text>{item.description}</Text>
         </View>
       ):""

     }
 

}
/>

</SafeAreaView>