score:1

Accepted answer

if you want to do the way you tried, i suggest using useref(). it's a way to control your html elements in jsx. the idea is similar to yours, but one that actually works:

  const testimonialelem = useref();
  useeffect(() => {
    let idx = 1;
    function updatetestimonial() {
      const { name, position, photo, text } = testimonials[idx];

      testimonialelem.current.innerhtml = text;
      idx++;

      if (idx > testimonials.length - 1) {
        idx = 0;
      }
    }
    setinterval(updatetestimonial, 3000);
  }, []);

i have only refed one element, the p tag with the main text of the testimonial, but you can easily create separate refs for the rest of the dynamic components. here is a sandbox: https://codesandbox.io/s/old-monad-ojxn5?file=/src/app.js

please note that given that you use react, taking advantage of state variables should be considered.


Related Query

More Query from same tag