My pagination is doing something strange. I use react-pager.
When I click on the first page - I have not any items (but I heed them), when I click on the second page I have 4 items and when I click on the third page my items just added to the items from the second page. I mean on the third page I have 8 items old+new, not 4 new items like I heed. I think something wrong in slice.
Component is below:
import React, {Component} from 'react';
import {connect} from 'react-redux';
import Pager from 'react-pager';
class AlbumsShow extends Component {
constructor(props) {
super(props);
this.renderImage = this.renderImage.bind(this);
this.handlePageChanged = this.handlePageChanged.bind(this);
this.state = {
total: 3,
current: 1,
visiblePage: 2,
};
}
handlePageChanged(newPage) {
this.setState({ current : newPage });
}
renderImage() {
return this.props.images.slice((this.state.current-1), this.state.current * 4).map(image => (
<li key={image.id}>
<img className="album_img" alt="job" src={image.img} />
<p className="album_title">Test</p>
</li>
));
}
render() {
return (
<div>
<div>
{this.renderImage()}
</div>
<Pager
total={this.state.total}
current={this.state.current}
visiblePages={this.state.visiblePage}
titles={{ first: '<|', last: '>|' }}
className="pagination-sm pull-right"
onPageChanged={this.handlePageChanged}
/>
</div>
);
}
}
function mapStateToProps(state, ownProps) {
const currentAlbumId = parseInt(ownProps.params.id, 10);
return {
images: state.main.albums.filter(album => album.id === currentAlbumId)[0].images,
};
}
export default connect(mapStateToProps)(AlbumsShow);
Also if I will have more 10 items my pagination should be visible and if less than 10 - null, but my condition is not working too. For example:
{this.renderImage() > 10 ?
<Pager
total={this.state.total}
current={this.state.current}
visiblePages={this.state.visiblePage}
titles={{ first: '<|', last: '>|' }}
className="pagination-sm pull-right"
onPageChanged={this.handlePageChanged}
/>: null }