Develop Reference

How can the render be synced with the state on pagination click with react?

I created a suggestions search and its built to break up the fetch based on the current page. The state is console.loged correctly, but the render is one page click event behind. This is obviously not the behavior we want. It seems like the state is being updated fine. I have tried to refactor the code difference ways, and even tried this.forceUpdate()
Here is the code
SearchOrderBar.js
import React, { Component } from "react";
import {Input, Label, Table, Icon, Header, Menu} from 'semantic-ui-react';
import "./SearchOrderBar.css";
// import { resolve } from "dns";
// import PropTypes from 'prop-types';
import Pagination from '../Search/Pagination';
class SearchOrderBar extends Component {
constructor(props) {
super(props);
this.text = "";
this.state = {
suggestions: [],
addToQuery: false,
Query: [],
pagesNeeded: 0,
page: 1
};
let searchTerm = null;
const {pageLimit = null, keyTimer = null, } = props;
this.pageLimit = typeof pageLimit === 'number' ? pageLimit : 10;
this.handlePageClick = this.handlePageClick.bind(this);
this.fetchCallBack = this.fetchCallBack.bind(this);
// this.addToQuery = this.addToQuery.bind(this);
this.keyUpHandler = this.keyUpHandler.bind(this);
this.keyDownHandler = this.keyDownHandler.bind(this);
}
handlePageClick(page){
this.forceUpdate();
this.setState({
page: page
})
this.fetchCallBack();
}
//This fetch should be called in a dynamic switch case
fetchCallBack() {
let y = this.pageLimit;
let x = this.state.page > 1 ? (this.pageLimit*this.state.page) - this.pageLimit : 0;
// Return a promise
return new Promise((resolve, reject) => {
let searchTerm = this.searchTerm;
return fetch(`http://localhost:5000/api/searchorders/${searchTerm}/${x}/${y}`)
.then(res => {
if (!res.ok) {
throw res;
}
// Convert serialized response into json
return res.json()
}).then(data => {
//Use data
let searchTerm = data.map(data => {
let rData = {};
rData = data;
return rData;
})
this.item = searchTerm;
//console.log('here from callback')
this.setState({
suggestions: []
})
return searchTerm;
}).then( data => {
// console.log(this.totalRecords)sd
//console.log(data)
if (searchTerm.length === 0) {
this.setState({
suggestions: [],
rangeCount_URL: `http://localhost:5000/api/searchorderscount/${searchTerm}`
});
} else {
const suggestions = data.filter(function(v){
if(Object.values(v).includes(searchTerm.toLowerCase()) !== -1 || Object.values(v).includes(searchTerm.toUpperCase()) !== -1){
return v
}
})
console.log(suggestions)
this.text = searchTerm;
this.setState({ suggestions: suggestions.sort()});
}
})
})
}
pageCountCallBack(){
return new Promise((resolve, reject) => {
let searchTerm = this.searchTerm;
return fetch(`http://localhost:5000/api/searchorderscount/${searchTerm}/`)
.then(res => {
if (!res.ok) {
throw res;
}
// Convert serialized response into json
return res.json()
}).then(data => {
//Use data
let searchTerm = data.map(data => {
let rData = {};
rData = data;
return rData;
})
this.item = searchTerm;
// console.log('here from Page Count callback')
this.renderSuggestions();
resolve(searchTerm)
})
})
}
keyUpHandler = (e) => {
if(e.target.value.length >= 3){
this.keyTimer = setTimeout(this.countFetch(e), 1500);
} else {
this.setState(() => {
return {
suggestions : [],
pagesNeeded : 0
}
})
clearTimeout(this.keyTimer);
}
}
keyDownHandler = (e) => {
clearTimeout(this.keyTimer);
}
//Any time text is changed in the text field
countFetch = (e) => {
const value = e.target.value;
this.searchTerm = value;
this.pageCountCallBack().then(data => {
const totalRecords = data[0].rows;
this.setState(() => {
return {pagesNeeded : Math.ceil(totalRecords / this.pageLimit)}
})
//console.log("total" + totalRecords);
//console.log("page limit"+this.pageLimit);
//console.log("Needed" + this.state.pagesNeeded );
})
this.fetchCallBack();
}
renderSuggestions() {
//const { suggestions } = this.state;
const tableStyle = {
'tableLayout': 'fixed',
'overflowWrap': 'break-word'
}
return (
<Table style={tableStyle} celled>
{this.state.suggestions.length === 0 ?
(<Table.Body>
<Table.Cell colSpan="7">
<div className="ui fluid warning icon message">
<Icon name="exclamation triangle" size="huge" color="orange"/>
<div className="content">
<Header>No Records Found</Header>
<p>Try Seaching by one of the following:</p>
<ul>
<dt>Name</dt>
<dt>Order Number</dt>
<dt>Address (Shipping or Billing )</dt>
<dt>Phone Number</dt>
<dt>Email</dt>
</ul>
</div>
</div>
</Table.Cell>
</Table.Body>)
: (
<>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Order#</Table.HeaderCell>
<Table.HeaderCell>Billing Address</Table.HeaderCell>
<Table.HeaderCell>Shipping Address</Table.HeaderCell>
<Table.HeaderCell>Email</Table.HeaderCell>
<Table.HeaderCell>Phone Number</Table.HeaderCell>
<Table.HeaderCell>Sales Channel</Table.HeaderCell>
<Table.HeaderCell>Order Date</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{this.state.suggestions.map((item, index) => (
<Table.Row className="hoverRow">
<Table.Cell key={index} onClick={() => this.addToQuery(item)}>
{item.customerPO}
</Table.Cell>
<Table.Cell>
{item.billToAddress}
</Table.Cell>
<Table.Cell>{item.shipToAddress}</Table.Cell>
<Table.Cell>{item.email}</Table.Cell>
<Table.Cell>{item.phone}</Table.Cell>
<Table.Cell>{item.customerContact}</Table.Cell>
<Table.Cell>{item.dateCreated}</Table.Cell>
</Table.Row>
))}
</Table.Body>
</>
)
}
<Pagination key={this.state.pagesNeeded} tableCols="7" pagesNeeded={this.state.pagesNeeded} btnLimit={5} pageClick={this.handlePageClick} currPage={this.state.page} pageLimit={this.pageLimit}/>
</Table>
);
}
handleIconClick(){
console.log('icon clicked ' + this.state.Query )
}
render() {
const {text} = this.state
//console.log(this.state)
return (
<>
<div className="App-Component">
<div className="App-Search">
<Input icon={{ name: 'search', circular: true, link: true, onClick: () => this.handleIconClick() }} placeholder="Search" value={text} type="text" onKeyUp={this.keyUpHandler} onKeyDown={this.keyDownHandler} className="App-Search"/>
{this.renderSuggestions()}
</div>
</div>
</>
);
}
}
export default SearchOrderBar;
Here is the pagination but I don't think this matters as much for the solution. It is relevant for the page button click.
import React, {Component} from 'react';
import {Input, Label, Table, Icon, Header, Menu} from 'semantic-ui-react'
/**
* Helper Method for creating a range of Numbers
* Range )( )
*/
const range = (from, to, step = 1) => {
let i = from;
const range = [];
while (i<=to) {
range.push(i);
i+=step;
}
}
export default class Pagination extends Component {
constructor(props){
super(props)
const { totalRecords = null, pageNeighbours = 0, rangeCount_URL = this.props.rangeCount_URL, pageArray = [] } = props;
this.pageArray = typeof pageArray === 'array' ? pageArray : [];
}
renderPagination = () => {
//console.log("hello from pagination");
let n = this.props.pagesNeeded;
let pArray = [];
let page = this.props.currPage;
//console.log(n)
if (page > 1){
pArray.push(<Menu.Item as='a' icon onClick={() => this.props.pageClick(page-1)}>
<Icon name='chevron left' />
</Menu.Item>)
}
for(let i = (page >1 ? page-1: page); pArray.length < (page > this.props.btnLimit ? this.props.btnLimit+1 : this.props.btnLimit); i++){
//console.log(i);
pArray.push(<Menu.Item index={i} className={i == page ? 'active' : ''} onClick={() => this.props.pageClick(i)} as='a'>{i}</Menu.Item>)
}
if (page < n){
pArray.push(<Menu.Item as='a' icon onClick={() => this.props.pageClick(page+1)}>
<Icon name='chevron right' />
</Menu.Item>)
}
this.pageArray = pArray;
return pArray;
}
render(){
const pageCount = (() => {
const totalRecords = this.totalRecords;
if(totalRecords > 0){
return (this.totalPages = Math.ceil(this.totalRecords / this.props.pageLimit))
}
})();
//console.log(this.pageArray);
return(
<Table.Footer>
{ this.props.pagesNeeded > 1 &&
<Table.Row>
<Table.HeaderCell colSpan={this.props.tableCols}>
<Menu floated='right' pagination>
{this.renderPagination()}
</Menu>
</Table.HeaderCell>
</Table.Row>
}
</Table.Footer>
)
}
}

setState is batched and invoked asynchronously, meaning when you call to this.setState({page}) then read this.state.page in fetchCallBack you probably get the "old" page and not the new page.
Either pass the page directly to fetchCallBack
this.fetchCallBack(page)
And read the page from it and not directly from the state
Or call it as the second argument of setState which is a callback that react will invoke right after the state has been updated.
this.setState({ page }, this.fetchCallBack);

At the point fetchCallBack is called, this.state.page is not updated yet because setState is called asynchronously, that's why it's using the old value. Try this:
handlePageClick(page) {
this.setState({ page }, this.fetchCallBack);
}
The callback syntax allows you to run the function in the next iteration.

How to pass props to a state in a React component

I have this component that I've created which uses an array of objects and populates results that are located in the state. It's a Carousel that displays arrows based on how much data is present, so that's why I'm doing this through state. (i'm including the entire code so you can see).
Now I want this Carousel to be used on different pages and the data to be pulled from each page dynamically. I understand that I can do this through props, but I'm not sure how to reorganize the current component to be able to do that.
How do I pass data into props on a different page and add it inside the state here?
class Carousel extends Component {
constructor(props) {
super(props);
this.state = {
items: [
{name: 'First Name', city: 'City'},
{name: 'First Name2', city: 'City2'},
{name: 'First Name3', city: 'City3'}
],
active: 1,
direction: ''
};
this.rightClick = this.moveRight.bind(this);
this.leftClick = this.moveLeft.bind(this);
this.setActive = this.setActive.bind(this);
}
renderSlides(item, index) {
let position;
const {active} = this.state;
if (active === index) {
position = `${styles.active}`;
} else if (active === index + 1) {
position = `${styles.prev}`;
} else if (active === index - 1) {
position = `${styles.next}`;
} else if (active > index) {
position = `${styles.left}`;
} else if (active < index) {
position = `${styles.right}`;
}
return (
<div>
<div className={styles.SliderItem__name}>
- {item.name}, {item.city} {item.state}
</div>
</div>
);
}
renderSliderNav() {
const slides = this.state.items;
const active = this.state.active;
return slides.map((slide, index) => (
<a onClick={() => this.setActive(index)}
key={index}
className={classnames({[styles.active]: active === index})}>
<li className={classnames(styles.LessonSlide__navDot, {[styles.active]: active === index})}></li>
</a>
));
};
setActive(selected) {
const direction = selected > this.state.active ? 'right' : 'left';
this.setState({
active: selected,
direction: direction
});
}
moveLeft() {
const newActive = this.state.active - 1;
if (this.state.active + 1 === 1) {
return;
}
this.setState({
active: newActive < 0 ? this.state.items.length - 1 : newActive,
direction: 'left'
});
}
moveRight() {
const newActive = this.state.active;
if (this.state.active + 1 === this.state.items.length) {
return;
}
this.setState({
active: (newActive + 1) % this.state.items.length,
direction: 'right'
});
}
render() {
const items = this.state.items;
if (!items || items.length === 0) {
return null;
}
return (
<div className={styles.LessonSlider}>
<div className={styles.SliderItem__wrapper}>
<div className={styles.SliderItem__container}>
<h3>Results</h3>
<div className={`${styles.LessonSlider__container} ${styles.noselect}`}>
{this.state.active + 1 !== 1
&& <button className={`${styles.LessonSlider__button} ${styles.LessonSlider__button__prev}`} onClick={this.leftClick} />}
{this.state.items.map((item, index) => this.renderSlides(item, index))}
{this.state.active + 1 !== this.state.items.length
&& <div className={`${styles.LessonSlider__button} ${styles.LessonSlider__button__next}`}
onClick={this.rightClick} />}
</div>
<div>
<ul className={`${styles.LessonSlide__nav} ${styles.noselect} ${this.props.colourScheme}`}>
{this.renderSliderNav()}
</ul>
</div>
</div>
</div>
</div>
);
}
}
export default Carousel;

It sounds to me like you want to be able to call Carousel from other pages like this
<Carousel items=[{name: 'First Name', city: 'City'}] />
Which you can access in Carousel with props.items
Solution
constructor(props) {
super(props);
this.state = {
items: props.items
}
}
You could also put ALL your props into state like this; however, that can have unexpected consequences and is not recommended.
constructor(props) {
super(props);
this.state = {
...props
}
}
Documentation
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

ReactJS - Changing the color of the current number of the pagination

I have a pagination ReactJS App.
See the app link:
https://codepen.io/claudio-bitar/pen/VERORW
I would like to change the color of the current number of the pagination. For exemple the first page is shown so I want to change the color of number one, second, number two and etc...
The code:
class TodoApp extends React.Component {
constructor() {
super();
this.state = {
todos: {
"elements": ['a','b','c','d','e','f','g','h','i','j','k']
},
currentPage: 1,
todosPerPage: 3
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(event) {
this.setState({
currentPage: Number(event.target.id)
});
}
render() {
const { todos, currentPage, todosPerPage } = this.state;
// Logic for displaying current todos
const indexOfLastTodo = currentPage * todosPerPage;
const indexOfFirstTodo = indexOfLastTodo - todosPerPage;
const currentTodos = todos.elements.slice(indexOfFirstTodo, indexOfLastTodo);
const renderTodos = currentTodos.map((todo, index) => {
return <li key={index}>{todo}</li>;
});
// Logic for displaying page numbers
const pageNumbers = [];
for (let i = 1; i <= Math.ceil(todos.elements.length / todosPerPage); i++) {
pageNumbers.push(i);
}
const renderPageNumbers = pageNumbers.map(number => {
return (
<li
key={number}
id={number}
onClick={this.handleClick}
>
{number}
</li>
);
});
return (
<div>
<ul>
{renderTodos}
</ul>
<ul id="page-numbers">
{renderPageNumbers}
</ul>
</div>
);
}
}
ReactDOM.render(
<TodoApp />,
document.getElementById('app')
);

You need to give the <li> a classname dependeing on the current page number and provide a css class for it.
For example:
const renderPageNumbers = pageNumbers.map(number => {
return (
<li
key={number}
id={number}
onClick={this.handleClick}
className={currentPage === number ? 'active' : ''}
>
{number}
</li>
);
});
This should result in a DOM node like either <li id="1" class="active">1</li> or <li id="1">1</li>

React table with sorting and pagination doesn't update

I am making a simple table in react where I have pagination (separate component) and sorting.
The table should sort update when table header is clicked. It changes state of data. The data is sorted but it doesn't update. The table is rerendered when I change page (pagination component) and it does have sorted data.
The problem is with
this.state.pageOfItems.map((element, index) =>
if I change it to
this.state.data.map((element, index) =>
then sorting works, but pagination doesn't
Please help me get the table data updated immidiately when table header is clicked.
Table component:
import React, { Component } from 'react';
import classes from './Table.css';
import data from 'data.json';
import Pagination from '../Pagination/Pagination';
class Table extends Component {
constructor(props){
super(props);
this.state = {
data: props.data,
headings: Object.keys(props.data[0]),
sortOrder: props.sortOrder || "original",
sortKey: props.sortKey || null,
pageOfItems: []
};
this.sortHandler = this.sortHandler.bind(this);
this.onChangePage = this.onChangePage.bind(this);
}
componentWillMount() {
//TODO: only apply this to the root element of the table component
document.addEventListener('dragover', (event) => {
event.preventDefault();
});
}
sortHandler(e){
const sortKey = e.target.dataset.sortcolumn;
const currentSortKey = this.state.sortKey;
const currentSortOrder = (sortKey === currentSortKey) ? this.state.sortOrder : "original";
this.setState({sortKey: e.target.dataset.sortcolumn});
console.log(currentSortOrder)
switch(currentSortOrder){
case "original":
this.setState({sortOrder: "ascending"});
this.state.data.sort((a, b)=>{
if (a[sortKey] < b[sortKey]) {
return -1;
}
if (a[sortKey] > b[sortKey]) {
return 1;
}
return 0;
});
break;
case "ascending":
this.setState({sortOrder: "descending"});
this.state.data.sort((a, b)=>{
if (a[sortKey] < b[sortKey]) {
return 1;
}
if (a[sortKey] > b[sortKey]) {
return -1;
}
return 0;
});
break;
case "descending":
this.setState({sortOrder: "original"});
this.state.data = this.props.data;
break;
}
this.setState({data: this.state.data});
console.log(this.state.data);
}
onChangePage(pageOfItems) {
// update state with new page of items
this.setState({ pageOfItems: pageOfItems });
}
render() {
return (
<div role="region" aria-labelledby={this.props.id} tabindex="0" style={{overflow: 'auto'}}>
<table cellSpacing="0" cellPadding="0" data-sortorder={this.state.sortOrder}>
{this.props.caption &&
<caption id={this.props.id}>{this.props.caption}</caption>
}
<thead>
<tr>
{this.state.headings.map((element, index) => {
return (
<th
data-sortcolumn={element}
id={'header' + index}
onClick={this.sortHandler}>
{element}
</th>
)
})}
</tr>
</thead>
<tbody>
{this.state.pageOfItems.map((element, index) => {
return (
<tr
id={'row' + index}>
{element && Object.values(element).map((cell)=>{
return <td>
{cell}
</td>
})}
</tr>
)
})}
</tbody>
</table>
<Pagination items={this.state.data} onChangePage={this.onChangePage} />
</div>
);
}
}
Pagination component:
import React from 'react';
import PropTypes from 'prop-types';
const propTypes = {
items: PropTypes.array.isRequired,
onChangePage: PropTypes.func.isRequired,
initialPage: PropTypes.number
}
const defaultProps = {
initialPage: 1
}
class Pagination extends React.Component {
constructor(props) {
super(props);
this.state = { pager: {} };
}
componentWillMount() {
this.setPage(this.props.initialPage);
}
setPage(page) {
var items = this.props.items;
var pager = this.state.pager;
if (page < 1 || page > pager.totalPages) {
return;
}
// get new pager object for specified page
pager = this.getPager(items.length, page);
// get new page of items from items array
var pageOfItems = items.slice(pager.startIndex, pager.endIndex + 1);
// update state
this.setState({ pager: pager });
// call change page function in parent component
this.props.onChangePage(pageOfItems);
}
getPager(totalItems, currentPage, pageSize) {
// default to first page
currentPage = currentPage || 1;
// default page size is 10
pageSize = pageSize || 5;
// calculate total pages
var totalPages = Math.ceil(totalItems / pageSize);
var startPage, endPage;
if (totalPages <= 10) {
// less than 10 total pages so show all
startPage = 1;
endPage = totalPages;
} else {
// more than 10 total pages so calculate start and end pages
if (currentPage <= 6) {
startPage = 1;
endPage = 10;
} else if (currentPage + 4 >= totalPages) {
startPage = totalPages - 9;
endPage = totalPages;
} else {
startPage = currentPage - 5;
endPage = currentPage + 4;
}
}
// calculate start and end item indexes
var startIndex = (currentPage - 1) * pageSize;
var endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
// create an array of pages to ng-repeat in the pager control
var pages = [...Array((endPage + 1) - startPage).keys()].map(i => startPage + i);
// return object with all pager properties required by the view
return {
totalItems: totalItems,
currentPage: currentPage,
pageSize: pageSize,
totalPages: totalPages,
startPage: startPage,
endPage: endPage,
startIndex: startIndex,
endIndex: endIndex,
pages: pages
};
}
render() {
var pager = this.state.pager;
return (
<ul className="pagination">
<li className={pager.currentPage === 1 ? 'disabled' : ''}>
<a onClick={() => this.setPage(pager.currentPage - 1)}>< back</a>
</li>
{pager.pages.map((page, index) =>
<li key={index} className={pager.currentPage === page ? 'active' : ''}>
<a onClick={() => this.setPage(page)}>{page}</a>
</li>
)}
<li className={pager.currentPage === pager.totalPages ? 'disabled' : ''}>
<a onClick={() => this.setPage(pager.currentPage + 1)}>next ></a>
</li>
</ul>
);
}
}
Pagination.propTypes = propTypes;
Pagination.defaultProps
export default Pagination;
EDIT: A part of the pagination has been moved to table component and now it works correctly

I think the problem may come from the fact that you try changing this.state directly in your method sortHandler before passing it to setState.
Try cloning this.state.data first: var clone = this.state.data.slice(0);
Then manipulate (sort) it, and finally assign it to your new state with this.setState({ data: clone })
Also, you may avoid calling multiple times this.setState() in your method, rather once at then end of your function.

I found several problems here.
First: don't assign state by this.state['arg']=. It's a bad practice. Use this.setState() instead.
Second: this.setState() it's asynchronous function, don't forget. Use callbacks. this.setState({ data }, () => anotherFunction())
In your case you can use lodash cloneDeep() method. It return deep copy of object, so you will not change original object. const data = _.cloneDeep(this.state.data).sort().
So. this.setState({ sortKey: e.target.dataset.sortcolumn }, () => putYourSwitchHere()); After that,
this.setState({sortOrder: "ascending"});
this.state.data.sort((a, b)=>{
if (a[sortKey] < b[sortKey]) {
return -1;
}
if (a[sortKey] > b[sortKey]) {
return 1;
}
return 0;
});
break;
Try to use:
const data = _.cloneDeep(this.state.data).sort((a, b)=>{
if (a[sortKey] < b[sortKey]) {
return -1;
}
if (a[sortKey] > b[sortKey]) {
return 1;
}
return 0;
});
this.setState({sortOrder: "ascending", data});
break;
You have already assign this.state.data, this.state.data = this.props.data will make a lot of errors in your last case.

The problem is in sortHandler function.
You are sorting the data using javascript sort() method. It is mutating method and doesn't create new object so React.js can't detect that the data has changed.
You should use non-mutating method.
Your code should be
const newData = this.state.data.concat().sort(...);
this.setState({data: newData});

React-Bootstrap - Pagination not showing

I'm using the react-bootstrap to paginate the result. It is rendering the div #content, but it is not showing nothing more. It is showing only a empty div with width, height and background color as I configured on the CSS file. I would like to display the pagination showing one house per page. The result of data from JSON is catched successfully. How can I solve the pagination issue? Thanks!
import React, { Component } from 'react'
import axios from 'axios'
import { Pagination } from 'react-bootstrap'
const URL_HOUSES = 'http://localhost:3001/houses';
class Casas extends Component {
constructor(props) {
super(props)
this.state = {
houses: []
}
this.handlePageChange = this.handlePageChange.bind(this)
}
getNumPages(currentPage) {
{ this.handlePageChange }
this.setState({
per_page: this.props.results ,
currentPage: currentPage + 1 ,
previousPage: currentPage - 1
});
}
handlePageChange(page, evt) {
const currentPage = this.state.currentPage || 1;
const numPages = this.getNumPages();
const pageLinks = [];
if (currentPage > 1) {
if (currentPage > 2) {
pageLinks.push(1);
pageLinks.push(' ');
}
pageLinks.push(currentPage - 1);
pageLinks.push(' ');
}
for (let i = 1; i <= numPages; i++) {
const page = i;
pageLinks.push(page);
}
if (currentPage < numPages) {
pageLinks.push(' ');
pageLinks.push(currentPage + 1);
if (currentPage < numPages - 1) {
pageLinks.push(' ');
pageLinks.push(numPages);
}
}
this.setState({ currentPage: currentPage + 1 } );
this.setState({ previousPage: currentPage - 1 } );
}
componentDidMount() {
axios.get(URL_HOUSES)
.then(res => {
this.setState({ houses: res.data })
})
}
render() {
const per_page = "1";
const paginationData = this.state.houses
let numPages = Math.ceil(paginationData.length / per_page);
if (paginationData.length % per_page > 0) {
numPages++;
}
return (
<div>
{this.state.houses.map(item =>
<div>
<h2>{item.name}</h2>
<p>{item.description}</p>
<ul>
{
item.photos.map(photo => <li>{photo}</li>)
}
</ul>
</div>
)}
<Pagination id="content" className="users-pagination pull-right"
bsSize="medium"
first last next prev boundaryLinks items={numPages}
activePage={ this.state.currentPage } onSelect={ this.handlePageChange
} />
</div>
)
}
}
export default Houses;

import React, { Component } from "react";
import ReactDOM from "react-dom";
import Pagination from "react-js-pagination";
require("bootstrap/less/bootstrap.less");
class App extends Component {
constructor(props) {
super(props);
this.state = {
activePage: 1,
itemPerPage: 3,
productList: [],
duplicateProductList: []
};
}
componentDidMount() {
let d = '';
$.get("YOUR API", function (data) {
d = data;
this.setState({
projectList: d,
duplicateProductList: d
});
}.bind(this));
}
handlePageChange(pageNumber) {
this.setState({ activePage: pageNumber });
}
render() {
const { projectList, activePage, itemPerPage } = this.state;
const indexOfLastTodo = activePage * itemPerPage;
const indexOfFirstTodo = indexOfLastTodo - itemPerPage;
const renderedProjects = projectList.slice(indexOfFirstTodo, indexOfLastTodo);
return (
<div>
<div>
YOUR LIST
</div>
<Pagination
activePage={this.state.activePage}
itemsCountPerPage={this.state.itemPerPage}
totalItemsCount={this.state.duplicateProductList.length}
pageRangeDisplayed={5}
onChange={this.handlePageChange.bind(this)}
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
Can you follow this link https://www.npmjs.com/package/react-js-pagination