如何使用 item.description 在列表视图中选择一个项目

Question

here is the app, I want to create diferent screens with diferent catergories in this case I have Dermatologista and Hospital, how can I select just one description

 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(

I just want to select the items with the description == dermatologista how can I do this ?

   <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>

  
  
   

) }

Answer 1

You can use array.filter :

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

and pass filteredPlaces instead of the entire object to the child component.

Answer 2

Try this

<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>