How to check that location have been visited with Flatlist ReactNative

Kedo 0
Viewed 28

First of all, sorry about my bad English. I'm having an issue that when I click on one location, it will show the "Checked" text on the corner, but when I click on another location, it will show the "checked" like the first, but the first "Checked" one reset to "not check", so how to keep the first result?

Here is my code:

export default function App() {
  const [selectedId, setSelectedId] = useState(null) 

  const renderView = ({item}) => (
      <TouchableOpacity onPress={() => setSelectedId(item.id) }
       style={{
       marginBottom:15,
       marginHorizontal:7,
       width:'46%',
       height:200,
       }}>
         <Image style={{width:'100%',height:'100%', borderRadius:20,}} source={{uri:item.image}}/>
         <Text style={{position:'absolute',bottom:0,padding:15,color:'yellow', fontWeight:'bold'}}>{item.title}</Text>
      <View style={{
        position:'absolute',
        right:0,
        padding:15,
        }}>
        {
          item.id === selectedId?<Text style={{fontWeight:'bold',color:'red'}}>Checked</Text>:<Text style={{fontWeight:'bold',color:'red'}}>Not check</Text>   
        }   
        </View>
      </TouchableOpacity>
  )
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.top}>
        <View style={{
          height:44,
          width:44,
          backgroundColor:'green',
          alignItems:'center',
          justifyContent:'center',
          borderRadius:30,
        }}>
          <Text style={{fontSize:25,color:'white'}}>=</Text>
        </View>
          <Text style={{fontSize:25,color:'blue',fontWeight:'bold'}}>Packages</Text>
        <View style={{
            height:44,
            width:44,
            backgroundColor:'green',
            alignItems:'center',
            justifyContent:'center',
            borderRadius:30,
        }}>
          <Text style={{fontSize:25,color:'white'}}>@</Text>
        </View>
      </View>

      <View style={{
          marginVertical:10,
          flex:1,
          paddingHorizontal: 15
        }}>
          <FlatList
            data = {DATA}
            showsVerticalScrollIndicator={false}
            numColumns={2}
            renderItem={renderView}
            keyExtractor={(item,index) => index.toString()}
          />
      </View>
    </SafeAreaView>
  )
}

const DATA = [
  {
    id: 1,
    image: 'https://c0.wallpaperflare.com/preview/298/610/503/vietnam-ho-chi-minh-city-cityscape-dusk-thumbnail.jpg',
    title: 'Ho Chi Minh city',
  },
  {
    id: 2,
    image: 'https://c0.wallpaperflare.com/preview/582/203/631/ha-noi-city-vietnam-lake-thumbnail.jpg',
    title: 'Ha Noi city',
  },
  {
    id: 3,
    image: 'https://media.istockphoto.com/photos/sunny-beach-in-the-pearl-island-of-phu-quoc-vietnam-picture-id1307905856?b=1&k=20&m=1307905856&s=170667a&w=0&h=MMd7neh6NOOxeUUlo6eCeU49vWp7HhQXtgTw0VNjogo=',
    title: 'Phu Quoc island',
  },
  {
    id: 4,
    image: 'https://media.istockphoto.com/photos/panorama-of-the-city-of-nha-trang-in-vietnam-from-drone-point-of-view-picture-id827359312?k=20&m=827359312&s=612x612&w=0&h=4QigU_O-sGaDhuFBOS_K66A4cXxc5IUoT4NrbsPw7Oo=',
    title: 'Nha Trang city',
  },
  {
    id: 5,
    image: 'https://c0.wallpaperflare.com/preview/298/610/503/vietnam-ho-chi-minh-city-cityscape-dusk-thumbnail.jpg',
    title: 'Ho Chi Minh city',
  },
  {
    id: 6,
    image: 'https://c0.wallpaperflare.com/preview/582/203/631/ha-noi-city-vietnam-lake-thumbnail.jpg',
    title: 'Ha Noi city',
  },
  {
    id: 7,
    image: 'https://media.istockphoto.com/photos/sunny-beach-in-the-pearl-island-of-phu-quoc-vietnam-picture-id1307905856?b=1&k=20&m=1307905856&s=170667a&w=0&h=MMd7neh6NOOxeUUlo6eCeU49vWp7HhQXtgTw0VNjogo=',
    title: 'Phu Quoc island',
  },
  {
    id: 8,
    image: 'https://media.istockphoto.com/photos/panorama-of-the-city-of-nha-trang-in-vietnam-from-drone-point-of-view-picture-id827359312?k=20&m=827359312&s=612x612&w=0&h=4QigU_O-sGaDhuFBOS_K66A4cXxc5IUoT4NrbsPw7Oo=',
    title: 'Nha Trang city',
  },
]
flatlist react-native-flatlist react-native
1 Answers

You are storing checkedId in your checked component and it rerenders every time one more is checked, it goes to default. You can add isChecked property to your data, it will be false as default. And you just change it to true on press.

This is how you data will look:

    const DATA = [
      {
        id: 1,
        image: 'https://c0.wallpaperflare.com/preview/298/610/503/vietnam-ho-chi-minh-city-cityscape-dusk-thumbnail.jpg',
        title: 'Ho Chi Minh city',
        isChecked:false,
      },
      {
        id: 2,
        image: 'https://c0.wallpaperflare.com/preview/582/203/631/ha-noi-city-vietnam-lake-thumbnail.jpg',
        title: 'Ha Noi city',
        isChecked:false,
      }]

You will is element checked based on your data state. And you will have onPress function. You will store you data in use State.

const handlePress=(id)=>{
    let arr=data;
    arr.map((item)=>{
    if(item.id===id){
    item.isChecked=!item.isChecked
    }
    //here you will just set you data to arr
    setData(arr)
  })

}

Alija Fajić0
Related