Копируем массив, выдёргиваем элемент с одного конца, засовываем с другого:
nextHandler = () => {
const items = [...this.state.items];
items.push(items.shift());
this.setState({ items });
}
prevHandler = () => {
const items = [...this.state.items];
items.unshift(items.pop());
this.setState({ items });
}
Или, можно обойтись одним обработчиком - посредством data-атрибута у кнопок указываем, откуда куда сколько перемещать элементов, используем это значение в качестве индекса для получения двух частей массива, меняем эти части местами:
<button onClick={this.rotate} data-step={-1}>prev</button>
<button onClick={this.rotate} data-step={+1}>next</button>
<button onClick={this.rotate} data-step={-2}>double prev</button>
<button onClick={this.rotate} data-step={+3}>triple next</button>
rotate = ({ target: { dataset: { step } } }) => {
this.setState(({ items }) => {
step %= items.length;
return {
items: [
...items.slice(step),
...items.slice(0, step),
],
};
});
}
