I have an Array of Strings that I have mapped using the Map funtion and rendered a Text with each item. Now if I click any mapped Text I want to highlight that clicked Text. Moreover, I want to keep on highlighting the next Text after some delay and so on. How to do it efficiently? So far I have witten the following code and I am able to Highlight the clicked text with the help of an extra style based on the selected page and index clicked. Now I want to have to select the next mapped item automatically after some delay.

function QiratContainer() {

  const [selectedIndex, setSelectedIndex] = useState<any>(2)
  const [selectedPage, setSelectedPage] = useState<number>(1)


return (
    <SafeAreaView >
      <FlatList
        data={quranData}
        showsVerticalScrollIndicator={false}
        renderItem={({ item, index }) => (
          <View style={styles.pageContainer}>

            <PageHeader surahName={item.firstSurahName} juzzNumber={item.juz} />

            <View style={{ flex: 1 }}>
              {item.ayahs.map((ayah: any, index: any) => (
                <>

                  {ayah.name !== undefined &&
                    <SurahHeader ayah={ayah} />
                  }

                  <Text onPress={() => playAyah(ayah, index)} style={[styles.ayahStyle, selectedIndex === index && selectedPage === ayah?.page && styles.selectedAyah]}>{ayah?.text?.replace("بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ", "")}</Text>


                </>
              ))}
            </View>

            <PageFooter pageNumber={item.page} />

          </View>
        )}
      />

    </SafeAreaView>
  )
  
  
    function playAyah(ayah: any, index: any) {
    console.log(ayah.audio)
    //Setting the Selected Index and the specific page of that index to highlight the selected ayah...
     console.log(index)
    // console.log(ayah.page)
    setSelectedIndex(index)
    setSelectedAyah(ayah)


  }
  
  }
  
  const styles = StyleSheet.create({

  ayahStyle: {
    fontSize: 24,
    fontWeight: 'bold',
    marginVertical: 8,
    color: 'black'
  },

  selectedAyah: {
    backgroundColor: 'grey'
  },

  pageContainer: {
    width: width,
    height: height - 20,
  },

})

Following is my JSON Array that is used in the FlatList and Map

[
{
    "juz": 1,
    "page": 1,
    "firstSurahName": "سورة الفاتحة",
    "ayahs": [
        {
            "number": 1,
            "name": "سورة الفاتحة",
            "englishName": "Al-Faatiha",
            "englishNameTranslation": "The Opening",
            "revelationType": "Meccan",
            "numberInPage": 0,
            "ayahsNumber": 7
        },
        {
            "number": 1,
            "text": "بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ",
            "numberInSurah": 1,
            "juz": 1,
            "page": 1,
            "hizbQuarter": 1,
            "ayahsNumber": 7,
            "surahNumber": 1,
            "numberInPage": 1,
            "audio": "https://everyayah.com/data/ahmed_ibn_ali_al_ajamy_128kbps/001001.mp3"
        },
        {
            "number": 2,
            "text": "الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ",
            "numberInSurah": 2,
            "juz": 1,
            "page": 1,
            "hizbQuarter": 1,
            "ayahsNumber": 7,
            "surahNumber": 1,
            "numberInPage": 2,
            "audio": "https://everyayah.com/data/ahmed_ibn_ali_al_ajamy_128kbps/001002.mp3"
        },
        {
            "number": 3,
            "text": "الرَّحْمَٰنِ الرَّحِيمِ",
            "numberInSurah": 3,
            "juz": 1,
            "page": 1,
            "hizbQuarter": 1,
            "ayahsNumber": 7,
            "surahNumber": 1,
            "numberInPage": 3,
            "audio": "https://everyayah.com/data/ahmed_ibn_ali_al_ajamy_128kbps/001003.mp3"
        },
        {
            "number": 4,
            "text": "مَالِكِ يَوْمِ الدِّينِ",
            "numberInSurah": 4,
            "juz": 1,
            "page": 1,
            "hizbQuarter": 1,
            "ayahsNumber": 7,
            "surahNumber": 1,
            "numberInPage": 4,
            "audio": "https://everyayah.com/data/ahmed_ibn_ali_al_ajamy_128kbps/001004.mp3"
        },
        {
            "number": 5,
            "text": "إِيَّاكَ نَعْبُدُ وَإِيَّاكَ نَسْتَعِينُ",
            "numberInSurah": 5,
            "juz": 1,
            "page": 1,
            "hizbQuarter": 1,
            "ayahsNumber": 7,
            "surahNumber": 1,
            "numberInPage": 5,
            "audio": "https://everyayah.com/data/ahmed_ibn_ali_al_ajamy_128kbps/001005.mp3"
        },
        {
            "number": 6,
            "text": "اهْدِنَا الصِّرَاطَ الْمُسْتَقِيمَ",
            "numberInSurah": 6,
            "juz": 1,
            "page": 1,
            "hizbQuarter": 1,
            "ayahsNumber": 7,
            "surahNumber": 1,
            "numberInPage": 6,
            "audio": "https://everyayah.com/data/ahmed_ibn_ali_al_ajamy_128kbps/001006.mp3"
        },
        {
            "number": 7,
            "text": "صِرَاطَ الَّذِينَ أَنْعَمْتَ عَلَيْهِمْ غَيْرِ الْمَغْضُوبِ عَلَيْهِمْ وَلَا الضَّالِّينَ",
            "numberInSurah": 7,
            "juz": 1,
            "page": 1,
            "hizbQuarter": 1,
            "ayahsNumber": 7,
            "surahNumber": 1,
            "numberInPage": 7,
            "audio": "https://everyayah.com/data/ahmed_ibn_ali_al_ajamy_128kbps/001007.mp3"
        }
    ],
    "number": 1,
    "counter": 1
}

]

CodePudding user response：

I always do this stuff by creating a state called "selected" and I save the ID of the selected .map child component in it.

In the .map children components I put classname={selected == id ? "cssSelected" : "cssNotSelected"}

And when I click on a .map child component: onClick={() => setSelected(id)}