Problem with setting state.index on click

Question

I'm creating a webpage slide show. I created a file called SlideshowData.js where I exported an array of objects with all image links and ids. So using react I mapped through the photos and added dots to them. I created the dots and each time the photos switch the dot changes color from gray to black to indicate that the current photo is active.

The problem occurs now that I keep trying to figure out how to make them clickable. So for example you would click on the first dot it would bring you to the first slide. I tried to do it with a "set.state" function and set the initial index to the "event.target.key" which I assigned slide.id but it doesn't work.

Thank you for your time. I attached the code below.

class Slideshow extends React.Component{
constructor(props){
    super(props);
    this.state = {
        index: 0,
        delay: 5000,
        length: SlideshowData.length,
    }
    this.clickedDot = this.clickedDot.bind(this)
}


componentDidMount(){
    
    
    document.addEventListener("onClick", this.clickedDot)
    
    if(this.state.index === this.state.length -1){
        setTimeout(()=> this.setState(()=>({
            index: 0
        })),this.state.delay)
    }else{
        setTimeout(()=> this.setState((state)=>({
            index: state.index + 1,
        })),this.state.delay)
    }
    
}
componentDidUpdate(){
    document.addEventListener("onClick", this.clickedDot)
    
    if(this.state.index === this.state.length -1){
        setTimeout(()=> this.setState(()=>({
            index: 0
        })),this.state.delay)
    }else{
        setTimeout(()=> this.setState((state)=>({
            index: state.index + 1,
        })),this.state.delay)
    }
    
}
clickedDot(){
    this.setState((slide) =>({
        index: this.state.length
    }))
    console.log(this.state.index)
}
render(){
    return(
        <div className="slidesContainer">
            <div className="SlideshowSlider" style={{ transform: `translate3d(${-this.state.index * 100}%, 0, 0)` }}>
                {SlideshowData.map((slide,index) => (
                <img className="slides" src={slide.image} key={index} alt="travel"/>
                ))}
            </div>
            <div className = "slideshowDots">
                {SlideshowData.map((slide,idx) => (
                <div onClick={this.clickedDot} key ={slide.id} className={`slideDot${slide.id === this.state.index ? " active" : ""}`} ></div>
                ))}
            </div>
        </div>
    )
  }
}
export default Slideshow

Answer 1

You can pass the index inside your onClick function on the dots such as this:

<div onClick={(idx) => this.clickedDot(idx)} key ={slide.id} className={`slideDot${slide.id === this.state.index ? " active" : ""}`} >

and then use the index to change the slide accordingly in your clickedDot function.