Why isn't my setInterval function being called in this React app?-CodePudding

I have a function to populate certain sections of my site with new content on a regular interval (5000), however my function isn't executing when I run the app?

If I set the interval to a console.log function, it works, but it doesn't seem to be working on my 'updateTestimonial' function. If I manually change the idx, it works fine...

I am just learning so apologies if this is obvious -_-

import coverphoto from './img/bkg/moss2.jpg';
import quotes from './img/quotes.png';
import quotes2 from './img/quotes2.png';
import React, { useState, useEffect } from 'react';


const Home = props =>{



  const testimonials = [
    {
        name: 'Ben Frank',
        position: 'CEO',
        photo: require('./img/chrisphoto.png'),
        text:
            "Test"
    },
    {
        name: 'Jill Cha',
        position: 'Software Engineer',
        photo: require('./img/chrisphoto.png'),
        text:
            'Testimonial1'
    },
    {
        name: 'Adam Niskanen',
        position: 'Data Entry',
        photo: require('./img/chrisphoto.png'),
        text:
            "Testimonial2"
    },
  ];
  
  
    let idx = 0;

    let name = testimonials[idx].name;
    let position= testimonials[idx].position;
    let photo= testimonials[idx].photo;
    let text = testimonials[idx].text;
  
    function updateTestimonial() {
      idx  ;        
      if (idx > testimonials.length - 1) {
          idx = 0;
      }
  
      name = testimonials[idx].name;
      position= testimonials[idx].position;
      photo= testimonials[idx].photo;
      text = testimonials[idx].text; 
  
    }
    
    setInterval(updateTestimonial, 5000);

    return (
<div className="home_main"    style={{ 
      backgroundImage: `url(${coverphoto})`, 
      backgroundRepeat: 'no-repeat'}}>
 <div className="home-testimonial-container"><img className="quotes" src={quotes}/><img className="quotes2" src={quotes2}/><div className='testimonial-entry'>
    <img className='testimonial-photo'
     src={photo}
     ></img>
    <div className='testimonial-text'>
        <h3 className='titlestyle2'>{name}</h3><h3 className='subtitlestyle' style={{fontSize: "10pt"}}>{position}</h3></div>
        <div className='testimonial-body-container'><h3 className='bodystyle' style={{fontStyle:"italic"}}>{text}</h3>
        </div>
        </div></div>
</div>

);
}
    
export default Home;

CodePudding user response：

You need to call setInterval inside a useEffect hook and don't forget to clear the interval when the component unmounts check the following article https://upmostly.com/tutorials/setinterval-in-react-components-using-hooks

CodePudding user response：

You can do like this
const [idx, setIdx] = useState(0);

useEffect(() => {
    const interval = setInterval(() => setIdx((previousValue) => previousValue 
        1), 5000);
    return () => {
      clearInterval(interval);
 };
 }, []);