Very basic react carousel

basic-carousel-by-react.js

import { useState, useEffect, useRef } from 'react';

export default function CatFriends() {
  const [index, setIndex] = useState(0);
  const ref = useRef(null);

  useEffect(() => {
    clearInterval(ref.current);
    ref.current = setInterval(() => {
      setIndex(index < catList.length - 1 ?index + 1 : 0)
    }, 3000);

    return () => {
      clearInterval(ref.current);
    }
  }, [index]);

  console.log(index)
  
  return (
    <>
      <nav>
        <button onClick={() => {
          if (index === 0) {
            setIndex(catList.length - 1)
          } else {
            setIndex(index - 1);
          }
        }}>
          Prev
        </button>
        <button onClick={() => {
          if (index < catList.length - 1) {
            setIndex(index + 1);
          } else {
            setIndex(0);
          }
        }}>
          Next
        </button>
      </nav>
      <div>
        <ul>
          {catList.map((cat, i) => (
            <SlideItem key={cat.id} {...{i, index, src: cat.imageUrl}} />
          ))}
        </ul>
      </div>
    </>
  );
}

const catList = [];
for (let i = 0; i < 10; i++) {
  catList.push({
    id: i,
    imageUrl: 'https://placekitten.com/250/200?image=' + i
  });
}

const SlideItem = ({i, index, src}) => {
  const ref= useRef(null)
  useEffect(() => {
    if(i === index) {
      ref.current.scrollIntoView({
        behavior: 'smooth',
        block: 'nearest',
        inline: 'center'
      })
    }
  }, [i, index])
  return (
    <li ref={ref}>
      <img
        className={
          index === i ?
            'active' :
            ''
        }
        src={src}
        alt={'Cat #' + i + 1}
      />
    </li>
  )
}