Почему не срабатывает условие в React?

Question

[Руслан]

Здравствуйте!
Есть класс, который выводит компонент на страницу. В этом компоненте в одном элементе меняется текст каждую секунду. Всего значений в props 3 штуки. Отсчет идет с нулевого. Каждую секунду увеличивается на единицу значение newsKey в state. Но когда доходит до 4-го, выдает ошибку, так как его не существует. Но почему условие this.state.newsKey === 2 не срабатывает?

class TrendingTittleAnimated extends Component {
    constructor(props) {
        super(props);
        const {newsItem} = this.props;
        this.state = {
            newsText: newsItem[0].newsItem,
            newsId: newsItem[0].newsId,
            newsKey: 0
        }
    }

    componentDidMount() {
        const {newsItem} = this.props;

        if (this.state.newsKey === 2) {
            console.log(this.state.newsKey);
            this.setState((state) => ({ newsKey: 0 }))
        }
        
    	// выполнять код каждую секунду
    	setInterval(() =>
            this.setState((state) => ({ 
                newsText: newsItem[this.state.newsKey].newsItem,
                newsKey: this.state.newsKey + 1
            })),
            1000
        );
    }

    render () {

        return (
        <div className="trending-animated">
            <ul id="js-news" className="js-hidden">
                <li className="news-item">{this.state.newsText + this.state.newsKey}</li>
            </ul>
        </div>
        )
    }
}

Answer 1

[pLavrenov]

1) Этот код морально устарел
2) дважды выполняемое newsKey() не выполняется поочереди!
3) setState передает в колбэк (state) не для того чтобы в функции использовать this.state
4) Название массива и название значения в элементе массива имеют одинаковое название, сам еще не путался в них?

const TrendingTittleAnimated = ({news}) => {
    
    const [counter, setCounter] = useState(0);

    useEffect(() => {
        const interval = setInterval(() => {
            setCounter(t => t === news.length - 1 ? 0 : t + 1 );
        }, 1000);
        return () => clearInterval(interval);
    }, []);

    return (
        <div className="trending-animated">
            <ul id="js-news" className="js-hidden">
                <li className="news-item">{news[counter].newsText}</li>
            </ul>
        </div>
    )
};