Pętla for w react, jak iterować po wartości.

Question

 function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
      }
    const demo = async() => {
      await sleep(100);
      if(ready1){
      for(let i=1; i<13; i++){
        const path1 = document.querySelector(".path"+i);
        path1.style.animation = "animate 1.4s forwards";
          await sleep(200);
         }
      }
    }

Witajcie! Powyższy kod to Vanilla js i on działa , w skrócie chodzi o zmiane stylu poszczególnych ścieżek co jakiś czas. Teraz chce ruszyć ten kod w react:

function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
      }
startpath1 = createRef();
    const demo = async() => {
      await sleep(100);
      if(ready1){
      for(let i=1; i<13; i++){
        this.startpath1.current.style.animation = "animate 1.4s forwards";
          await sleep(200);
           }
       }
 }

Tutaj mam problem " this.startpath1.current.style.animation = "animate 1.4s forwards"; " jak odniesc sie do tego lub podmienic te startpath1 na np. startpath + i , żeby za kazda iteracja bylo startpath2, startpath3 itd.

Z góry dziękuje za pomoc i przepraszam za te pytanie ale jestem początkującym jeśli chodzi o react i nie mam pojęcia jak to ugryźć. :( 

Answer 1

Wystarczyło te startpath dodac w tablice: const tab = [this.startpath0, this.startpath1,( itd...)]

for(let i=0; i<13; i++){

            tab[i].current.style.animation = "animate 1.4s forwards";

            await sleep(200);

        }

 

Comments

Po co tworzyć na to tablicę, skoro można skorzystać z bracket notation, aby property o kluczu "startPathN" (gdzie "N" to kolejny indeks) pozyskiwać dynamicznie:

for(let i=1; i<13; i++){
  this[`startpath${ i }`].current.style.animation = "animate 1.4s forwards";
  await sleep(200);
}