How to display a message every 5 seconds in ReactJS

Question

I have an array of messages and I want to display each message in the array in the Header component of my React page.

const array = ['a', 'b', 'c', 'd'];

I want to display each message in a

tag and at the same time I need a clear timeout function to prevent the time from speeding up after each click and it should switch to after 5 seconds Next message, please can someone help me.

Answer 1

For a simple loop over an array, you can do this:

const array = ['a', 'b', 'c', 'd'];

counter = 0;
const interval = setInterval(() => {
  console.log(array[counter % array.length]); //例如 "a", "b"
  //你可以对返回值做任何操作（将其放入a标签中）
  counter++;
}, 5000);

To clear the interval, you can do this:

clearInterval(interval);

I'm not sure what you want to do in the click event. Please provide further information.