Есть компонент:
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
items: [
{id: 1},
{id: 2},
{id: 3},
{id: 4},
{id: 5},
]
};
}
nextHandler = () => {
};
prevHandler = () => {
};
render() {
return (
<React.Fragment>
<ul className="list">
{
this.state.items.map((item) => {
return (
<div
key={item.id}
>
<div className="list__item">
key={item.id}
</div>
</div>
);
})
}
</ul>
<div className="controls">
<button type="button" onClick={this.prevHandler}>prev</button>
<button type="button" onClick={this.nextHandler}>next</button>
</div>
</React.Fragment>
);
}
};
export default App;
При нажатии на кнопку next, необходимо перемещать первый элемент массива items в конец:
items = [
{id: 2},
{id: 3},
{id: 4},
{id: 5}
{id: 1},
]
И, соответственно, при нажатии на prev, перемещать последний в начало.