TypeError... why would I be getting it?

[Elindo586]

Summary

Error:

page.js:28  Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'email')
    at eval (page.js:28:29)

Code in this link:
https://github.com/Elindo586/estuff/blob/main/app/main-campaign/page.js

^^ This code has been working fine, and still does the job, but apparently isn't clearing the intervals and trying to read another item, but there is no other item to read?

It should be giving me a "We are done!" console.log, but instead I am getting that error above.... Why could it be?

Additional information

No response

Example

No response

[icyJoseph]

I won't pass critic/review on the way you do things there, because there are certainly easier ways, with less cognitive load.

But there's a typo:

      if (arrayIndex === quotes.lenght) { // <--- here
        console.log("We are done!");

        clearInterval(myIntervals);
        arrayIndex = 0;
      }

Should be quotes.length

[icyJoseph]

So you could do a for of loop like this:

// define outside your function Page
const sleep = (duration) =>
  new Promise((next) => {
    setTimeout(next, duration);
  });


  const handleSubmit = async () => {
    const d = new Date();
    const month = d.getMonth() + 1;
    const days = d.getDate();
    const year = d.getFullYear();
    const hour = d.getHours();
    const minutes = d.getMinutes();
    const seconds = d.getSeconds();

    let timesRun = 0;

    console.log(
      `We are moving on ${month}/${days}/${year} at ${hour}:${minutes}:${seconds}s`
    );

    for (const currentQuote of quotes) {
      const data = {
        email: currentQuote.email,
        id: currentQuote.id,
      };

      console.log(data);

      const response = await fetch('/my/email-test', {
        method: 'POST',
        headers: {
          Accept: 'application/json, text/plain, */*',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
      });

      let res2;

      try {
        res2 = await response.json();
      } catch (err) {
        console.log('Error parsing', err);
      }

      const resMessage = res2.message;
      console.log(resMessage);

      const d = new Date();
      const month = d.getMonth() + 1;
      const days = d.getDate();
      const year = d.getFullYear();
      const hour = d.getHours();
      const minutes = d.getMinutes();
      const seconds = d.getSeconds();

      timesRun += 1;

      console.log(
        `we ran ${timesRun} times at ${month}/${days}/${year} at ${hour}:${minutes}:${seconds}s`
      );

      // To skip sleeping after doing the last one
      if (currentQuote === quotes[quotes.length - 1]) {
        continue;
      }

      await sleep(1000);
    }

    console.log('We are done!');
  };

No intervals, no var, no arrayIndex pointer to consider. You can see it here, https://stackblitz.com/edit/github-7ieqnmax?file=app%2Fmain-campaign%2Fpage.js,thejsons%2Ftest-emails.json, but I commented out the network request stuff :)

[icyJoseph]

You should also disable the button once you've triggered a workload. Just use a useState flag, initially false, set it to true on handle submit. And pass it as disabled prop to the button. Not ideal, but it does the trick. Once you hit the "we are done", set it back to false.