Estoy creando una presentación de diapositivas de una página web. Creé un archivo llamado SlideshowData.js donde exporté una serie de objetos con todos los enlaces e identificaciones de imágenes. Entonces, usando reaccionar, mapeé las fotos y les agregué puntos. Creé los puntos y cada vez que las fotos cambian, el punto cambia de color de gris a negro para indicar que la foto actual está activa.

El problema ocurre ahora que sigo tratando de descubrir cómo hacer que se pueda hacer clic en ellos. Entonces, por ejemplo, haría clic en el primer punto y lo llevaría a la primera diapositiva. Traté de hacerlo con una función "set.state" y establecí el índice inicial en "event.target.key" que asigné slide.id pero no funciona.

Gracias por tu tiempo. Adjunto el código a continuación.

 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