title: How to add dots in between page numbers in reactJS/Javascript Pagination
body: <p>I have made pagination component in react JS.   Currently, it just displays all the page numbers, but it should actually show some dots when there are more than 8 total pages. Here’s what it should look like:</p>
  
  <blockquote>
    <p>c.    total &lt;  9 pages: p1 selected  {1} 2 3 4 5 6 7 8</p>
    
    <p>d.   total &lt;  9 pages: p5 selected  1 2 3 4 {5} 6 7 8</p>
    
    <p>e.   total &lt;  9 pages: p8 selected  1 2 3 4 5 6 7 {8}</p>
    
    <p>f.    total >= 9 pages: p2 selected  1 {2} 3 ... 7 8 9</p>
    
    <p>g.    total >= 9 pages: p3 selected  1 2 {3} 4 ... 7 8</p>
    
    <p>h.    total >= 9 pages: p4 selected  1 ... 3 {4} 5 ... 9</p>
    
    <p>i.    total >= 9 pages: p6 selected  1 ... 5 {6} 7 ... 9</p>
    
    <p>j.    total >= 9 pages: p7 selected  1 2 3 ... 6 {7} 8 9</p>
    
    <p>k.    total >= 9 pages: p8 selected  1 2 3 ... 7 {8} 9</p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>console.clear();
  
  
  class TodoApp extends React.Component {
    constructor() {
      super();
      this.state = {
        todos: ['abc', 'bas', 'cqw', 'dqw', 'eqw', 'fqd', 'gfd', 'hsd', 'igh', 'jas', 'khf', 'abc', 'bas', 'cqw', 'dqw', 'eqw', 'fqd', 'gfd', 'hsd', 'igh', 'jas', 'khf', 'abc', 'bas', 'cqw', 'dqw', 'eqw', 'fqd', 'gfd', 'hsd', 'igh', 'jas', 'khf'],
        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.slice(indexOfFirstTodo, indexOfLastTodo);
  
  
  
      const renderTodos = currentTodos.map((todo, index) =&gt; {
        return &lt;li key = {
          index
        } &gt; {
          todo
        } &lt; /li&gt;;
      });
  
      // Logic for displaying page numbers
      const pageNumbers = [];
      for (let i = 1; i &lt;= Math.ceil(todos.length / todosPerPage); i++) {
        pageNumbers.push(i);
      }
  
  
      const renderPageNumbers = pageNumbers.map(number =&gt; {
        return (
  
          &lt;
          li key = {
            number
          }
          id = {
            number
          }
          onClick = {
            this.handleClick
          } &gt; {
            number
          } &lt;
          /li&gt;
        );
      });
  
      return ( &lt;
        div &gt;
        &lt;
        div id = "abc" &gt; {
          this.state.currentPage
        } &lt; /div&gt; &lt;
        ul &gt; {
          renderTodos
        }
  
        &lt;
        /ul&gt; &lt;
        ul id = "page-numbers" &gt; {
          renderPageNumbers
        }
  
        &lt;
        /ul&gt; &lt; /
        div &gt;
      );
    }
  }
  
  
  ReactDOM.render( &lt;
    TodoApp / &gt; ,
    document.getElementById('app')
  );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    margin: 0;
    font-family: 'Roboto', Arial, sans-serif;
    font-size: 1.2em;
  }
  
  #page-numbers {
    list-style: none;
    display: flex;
  }
  
  #page-numbers&gt;li {
    margin-right: 0.3em;
    color: blue;
    user-select: none;
    cursor: pointer;
  }
  
  #abc {
    color: red;
    text-decoration: underline;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
    &lt;title&gt;React JS&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="app"&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help is appreciated ! Thanks</p>