вы прям задались целью написать сами слайдер или просто не нашли нормальный готовый?
Ответ на ваш вопрос без разници где вы буду хранить currentSlideImage в стэйте или в сторе (если вы используете редукс). Но если вы будете использовать стейт переключение будет реализовать быстрее и думаю в этом моменте правильнее если конечно вам не важно при повторном переходе на страницу с данным слайдером показывать последний слайд на котором остановился пользователь.
import React, { Component } from 'react';
class Slider extends Component {
constructor(props){
super()
this.state=({
currentSlideImage : 0
})
}
handlePrevButton(){
let currentSlideImage = this.state.currentSlideImage;
this.setState({
currentSlideImage:currentSlideImage-1
})
}
handleNextButton(){
let currentSlideImage = this.state.currentSlideImage;
this.setState({
currentSlideImage:currentSlideImage+1
})
}
render() {
return (
<div className="container">
<button onClick={()=>this.handlePrevButton()}>Prev</button>
<img src={this.props.slides[this.state.currentSlideImage]} alt="slider-item"/>
<button onClick={()=>this.handleNextButton()}>Next</button>
</div>
);
}
}
export default Slider;
В данном коде не хватает проверки при клике на next возможно ситуация когда количество фоток 3 а пользователь накликал 4 произойдет ошибка. Тоже самое с prev кнопкой.