el código está en este codesandbox.io - https://codesandbox.io/s/react-slider-forked-wu0q6
if (newActiveIndex === slides[slides.length - 1].index) { const { slides } = this.state; // index (10-3) to (10) const add = slides.slice(slides.length - 3); const newSlides = slides.unshift(add); console.log("newSlides", newSlides); this.setState({ slides: newSlides }); } else { this.setState({ slides: slides }); } };Intenté usar el método unshift, pero cuando lo registro en la consola, devuelve un número y no una matriz. lo que quiero es [0,1,2,3,4,5] se convierte en [3,4,5,0,1,2]
Usaste dos componentes, cada uno tiene un estado. Cuando cambia el estado del componente de puntos, el componente de imagen no tiene idea de que hay un cambio. Entonces, la solución es agregar el estado activo en su App.js y pasarlo como accesorios para ambos componentes => si lo cambia de puntos, la imagen tendrá el último índice activo
import React from "react"; import ImageSlider from "./components/ImageSlider"; import SliderDots from "./components/SliderDots"; import "./styles.css"; const SliderData = require("./SliderData.json"); /** * Convert this to class since you will be working with class! */ export default class App extends React.Component { state = { selectedIndex: 2 }; setSelectedIndex = (i) => { this.setState({ selectedIndex: i }); }; render() { return ( <> <ImageSlider slides={SliderData} selectedIndex={this.state.selectedIndex} setSelectedIndex={this.setSelectedIndex} /> <SliderDots slides={SliderData} selectedIndex={this.state.selectedIndex} setSelectedIndex={this.setSelectedIndex} /> </> ); } }