title: Hiding page numbers from pagination in Reactjs
body: <p>I have a basic components with working pagination displaying props in a table.</p>
  <p>This however shows all the page numbers which is not ideal I would like only a few to be seen.</p>
  <p>e.g 1-2-3-4-5-20 so that it does not take up too much space.</p>
  <p>This is the component itself.</p>
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import { connect } from 'react-redux';
  
  class AllAlerts extends Component {
    state = {
      currentPage: 1,
      alertsPerPage: 8,
    };
  
    componentDidMount() {}
  
    handleClick(number) {
      this.setState({
        currentPage: number,
      });
    }
  
    render() {
      // Logic for displaying alerts
      const { currentPage, alertsPerPage } = this.state;
      const indexOfLastAlerts = currentPage * alertsPerPage;
      const indexOfFirstAlerts = indexOfLastAlerts - alertsPerPage;
      const currentAlerts = this.props.alerts.slice(indexOfFirstAlerts, indexOfLastAlerts);
  
      const renderAlerts = currentAlerts.map((alerts, index) =&gt; {
        return (
          &lt;li key={index}&gt;
            &lt;div&gt;
              All Title {alerts.title}
              &lt;li&gt;All ID {alerts.id}&lt;/li&gt;
              &lt;li&gt;All user Id {alerts.userId}&lt;/li&gt;
            &lt;/div&gt;
          &lt;/li&gt;
        );
      });
      // Logic for displaying page numbers
      const pageNumbers = [];
      for (let i = 1; i &lt;= Math.ceil(this.props.alerts.length / alertsPerPage); i++) {
        pageNumbers.push(i);
      }
      const renderPageNumbers = pageNumbers.map((number) =&gt; {
        return (
          &lt;button key={number} id={number} onClick={() =&gt; this.handleClick(number)}&gt;
            {number}
          &lt;/button&gt;
        );
      });
  
      return (
        &lt;&gt;
          &lt;&gt;All Alerts&lt;/&gt;
          &lt;br /&gt;
  
          &lt;form class=&quot;example&quot; action=&quot;/action_page.php&quot;&gt;
            &lt;input type=&quot;text&quot; placeholder=&quot;Search..&quot; name=&quot;search&quot; /&gt;
            &lt;button type=&quot;submit&quot;&gt;
              &lt;i class=&quot;fa fa-search&quot;&gt;&lt;/i&gt;
            &lt;/button&gt;
          &lt;/form&gt;
  
          &lt;&gt;{renderAlerts}&lt;/&gt;
          &lt;&gt;{renderPageNumbers}&lt;/&gt;
        &lt;/&gt;
      );
    }
  }
  
  export default AllAlerts;
  </code></pre>
  <p>From my understanding I would change this in this part of the code.</p>
  <pre class="lang-js prettyprint-override"><code>const pageNumbers = [];
  for (let i = 1; i &lt;= Math.ceil(this.props.alerts.length / alertsPerPage); i++) {
    pageNumbers.push(i);
    //Only push 1-5 and last which has to change depending on page number
  }
  </code></pre>
  <p>I have tried a few different approaches all not achieving what I would like.</p>
  <p>Thank you for your help :)</p>