React SetState and dispatch not working onClick function - reactjs

Question

I hope that some one helps me i get Content-Range from server and transform the string to the pagination
For example : when i call
sitesActions.getAll()
My action returns
sites:
acceptRange:"10"
contentRange:"0-9/25"
data:(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}..]
Content-Range : 0-9/25
Accept-Range : 10 (The maximum collection returned)
These result makes me generate my pagination array like this example
Pagination Details function generate array of pagination
function paginationDetails(contentRange, acceptRange) {
console.log('content', contentRange);
let paginationDetails = contentRange.split("/");
let allCollection = parseInt(paginationDetails[1]);
let numberReturnedData = acceptRange;
let paginationNbr = Math.ceil(allCollection/numberReturnedData);
let rows = [{
pageNumber : 1 ,
startData : 0,
endData: numberReturnedData-1
}]
for (let i = 1; i < paginationNbr; i++) {
let end = (numberReturnedData-1)+(Number(i)*numberReturnedData);
rows.push(
{
pageNumber: Number(i)+1,
startData : numberReturnedData*Number(i),
endData: (end>allCollection) ? allCollection : end ,
}
);
}
console.log(rows);
return rows;
}
Array of pagination
[{pageNumber: 1, startData: 0, endData: 9}
{pageNumber: 2, startData: 10, endData: 19}
{pageNumber: 3, startData: 20, endData: 25}]
To make the pagination Componenet Global and reused in each component
i add to my parent component click={sitesActions.getAllWithRange}
Action Get all with range
function getAllWithRange(start, end) {
return dispatch => {
dispatch(request());
sitesService.rangeSites(start, end)
.then(
sites => dispatch(success(sites)),
error => {
dispatch(failure(error));
dispatch(alertActions.error('Error fetching site data'));
}
);
};
function request() { return { type: sitesConstants.SITES_REQUEST } }
function success(sites) { return { type: sitesConstants.SITES_SUCCESS, sites } }
function failure(error) { return { type: sitesConstants.SITES_FAILURE, error } }
}
so i dispatch this props and uses it in pagination using
dispatch(this.props.click(elementInfo.startData, elementInfo.endData));
Pagination Component
<PaginationManager
click={sitesActions.getAllWithRange}
paginationInfo={paginationDetails(sites.items.contentRange, sites.items.acceptRange)} />
</Aux>
Parent Component File
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Aux} from '../hoc';
import {paginationDetails} from '../helpers';
import { sitesActions } from '../actions/sitesActions';
import classes from './BillsManager.css';
import PaginationManager from './PaginationManager';
class SitesManager extends Component {
componentDidMount() {
this.props.dispatch(sitesActions.getAll());
}
goToSite(siteLink) {
window.open('http://'+siteLink, '_blank');
}
render(){
const { sites } = this.props;
return(
<Aux>
<h1>Sites</h1>
<p>You can see all details of your sites.</p>
{sites.loading && <em>Loading sites...</em>}
{sites.items && <Aux>
<table className="table table-bordered">
<thead >
<tr>
<th>Site</th>
<th>Date</th>
<th>Status</th>
<th>Renew</th>
</tr>
</thead>
<tbody>
{sites.items.data.map((site, index) =>
<tr key={site.id}>
<th>{site.main_domain}</th>
<th>{site.CreatedTime}</th>
<th>{site.ps_status}</th>
<th className={classes.Link} onClick={() =>this.goToSite(site.main_domain)}><i className='fa fa-globe'></i></th>
</tr>
)}
</tbody>
</table>
<PaginationManager
click={sitesActions.getAllWithRange}
paginationInfo={paginationDetails(sites.items.contentRange, sites.items.acceptRange)} />
</Aux>
}
</Aux>
)
}
}
function mapStateToProps(state, ownProps) {
return {
sites : state.sites
};
}
export default connect(mapStateToProps)(SitesManager);
Pagination Component File
import React, {Component} from 'react'
import {connect} from 'react-redux';
class PaginationManager extends Component {
constructor(props) {
super(props)
this.state = {
activePage : this.props.paginationInfo[0],
activeIndex: 0
}
this.handleClick = this.handleClick.bind(this);
}
handleClick = (elementInfo, index) => {
const { dispatch } = this.props;
dispatch(this.props.click(elementInfo.startData, elementInfo.endData));
this.setState({
activePage : elementInfo,
activeIndex: index
})
}
render() {
let isDisabledPrevious = (this.state.activeIndex === 0) ? 'disabled' : '';
let isDisabledNext = (this.props.paginationInfo.length-1 === this.state.activeIndex) ? 'disabled' : '';
return ( <nav aria-label="Page navigation example">
<ul className="pagination justify-content-center">
<li className={`page-item ${isDisabledPrevious}`}>
<a className="page-link"
onClick={() => this.handleClick(this.props.paginationInfo[this.state.activeIndex-1]
,this.state.activeIndex-1)} >Previous</a>
</li>
{this.props.paginationInfo && this.props.paginationInfo.map((pageInfo, index) => {
return <li key={pageInfo.pageNumber} className={`page-item ${(this.state.activePage.pageNumber === pageInfo.pageNumber) ? 'active' : ''}` }>
<a className="page-link" onClick={() =>this.handleClick(pageInfo, index)} >{pageInfo.pageNumber}</a>
</li>
})
}
<li className={`page-item ${isDisabledNext}`}>
<a className="page-link"
onClick={() => this.handleClick(this.props.paginationInfo[this.state.activeIndex+1]
,this.state.activeIndex+1)} >Next</a>
</li>
</ul>
</nav>);
}
};
export default connect()(PaginationManager);
I was passing too much time trying to solve this problem , but i don't know why the setState don't work. The pagination works fine and the setState works and return the updated values just when i comment the dispatch(this.props.click(elementInfo.startData, elementInfo.endData));