Can't fix carousel algorithm in react

Question

I have a carousel of slides in my react.js project without using any libraries. When I use an odd amount of images everything works. But when I use even amount, although currentIndex is changing properly only odd images are displayed like 1,3,5 in this example with six images. Can anyone spot what is wrong with my code so it would work with ane amount of images not only with odd ones? Thanks very much

import React from 'react';
import Slide from './Slide';

import img1 from "../assets/img1.jpg";
import img2 from "../assets/img2.jpg";
import img3 from "../assets/img3.jpg";
import img4 from "../assets/img4.jpg";
import img5 from "../assets/img5.jpg";
import img6 from "../assets/img6.jpg";



class Test extends React.Component {
        state = {
        currentIndex: 0,
        images: [img1, img2, img3, img4, img5, img6]
        }

        prevSlide = () => {
        const lastIndex = this.state.images.length - 1;
        const resetIndex = this.state.currentIndex === 0;
        const index = resetIndex ? lastIndex : this.state.currentIndex - 1;
        this.setState({
          currentIndex: index
        });
      };

      nextSlide = () => {
        const lastIndex = this.state.images.length - 1;
        const resetIndex = this.state.currentIndex === lastIndex;
        const index = resetIndex ? 0 : this.state.currentIndex + 1;
        this.setState({
          currentIndex: index
        });
      };
    
      render() {
        const index = this.state.currentIndex;
        let newImagesArray = this.state.images.slice(index, index + 6);
        if (newImagesArray.length < 6) {
          newImagesArray = newImagesArray.concat(
            this.state.images.slice(0, 6 - newImagesArray.length)
          );
        }
        return (
          <div className="paint__container">
            {newImagesArray.map((image, i) =>
              this.state.currentIndex === i ? (
                <Slide key={i} url={image} alt="" />
              ) : null
            )}
                <div className="left__arrow" onClick={this.prevSlide}></div>
                <div className="right__arrow" onClick={this.nextSlide}></div>
          </div>
        );
    }
}

export default Test;

Answer 1

okay, thank you for providing the full code, looking at the component on github

we can find

• you have nextSlide defined twice, where the second I guess will overwrite the first declaration

• while you have the currentIndex in state why you are searching for the target slide in your render function? you don't have to do this my friend, while currentIndex correctly calculate the index then you just render the slide at that index, that's why we are using react after all

render() {
    const index = this.state.currentIndex;
    const images = this.state.images;

    return (
        <div className="paint__container">
            <Slide url={images[index]} alt="" />
            <div className="left__arrow" onClick={this.prevSlide}></div>
            <div className="right__arrow" onClick={this.nextSlide}></div>
        </div>
    );
}