title: How can I settle both 'next and previous' buttons in pagination
body: <p>I wanna it to be like this: </p>
  
  <p><a href="https://i.stack.imgur.com/y2oBr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y2oBr.jpg" alt="enter image description here"></a>  </p>
  
  <p>But not like this:</p>
  
  <p><a href="https://i.stack.imgur.com/w4cwf.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w4cwf.jpg" alt="enter image description here"></a></p>
  
  <p>I tried to solve this issue but no way, if anyone know please help: This is my render code in react.js:</p>
  
  <pre><code>return (
      &lt;nav className=""&gt;
        &lt;ul className="pagination"&gt; 
        {PageNumbers.includes(currentPage - 1) &amp;&amp; 
              &lt;a className="prev page-link" href="!#" onClick={() =&gt; { setCurrentPage(currentPage - 1);   paginate(currentPage - 1); }}&gt; Previous
               &lt;/a&gt;}     
         {PageNumbers.map(number =&gt; (          
             (number &lt; 3 || (number &gt; currentPage-2 &amp;&amp; number &lt; currentPage+2) || 
                number &gt; PageNumbers.length - 2 )  ?
            &lt;li
               key={number}
               className={number === currentPage ? "page-item active" : "page-item "}
            &gt;
              &lt;a
                onClick={() =&gt; paginate(number)}
                href="!#"
                className="page-link"
              &gt;
                 {number}
              &lt;/a&gt;
           &lt;/li&gt;
           :
           PageNumbers.length&gt;5 &amp;&amp; number &lt; 4 ? '...'
           : 
           number &lt; PageNumbers.length &amp;&amp; number == currentPage+2 ? '...'
           :null
  
       ))}
  
          {PageNumbers.includes(currentPage + 1) &amp;&amp; 
          &lt;a className="next page-link" href="!#" onClick={() =&gt; {setCurrentPage(currentPage + 1); paginate(currentPage + 1); }}&gt; Next 
          &lt;/a&gt;}  
     &lt;/ul&gt;
    &lt;/nav&gt;
  </code></pre>
  
  <p>);
  }</p>