React-Bootstrap - Pagination not showing

Question

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;

Answer 1

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