title: React table loads but disappears on clicking pagination links
body: <p>I am new to React and trying to develop my first web application. What I am trying to achieve is pretty basic. I am trying to fetch some data from an API and display it in a table. To the table I am trying to add pagination so that all the records are not displayed on the same screen. I have added the page numbers but when I click on any of the page number links, the correct data in the table gets loaded but the table disappears immediately. I have no clue why this is happening. Here is my code below:</p>
  <p>Basket.js</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  import Posts from &quot;../Posts&quot;;
  import Pagination from &quot;../Pagination&quot;;
  
  const Basket = () =&gt; {
    const [posts, setPosts] = useState([]);
    const [loading, setLoading] = useState(false);
    const [currentPage, setCurrentPage] = useState(1);
    const [postsPerPage] = useState(10);
  
    useEffect(() =&gt; {
      const fetchPosts = async () =&gt; {
        setLoading(true);
        const res = await axios.get(&quot;http://192.168.29.135:8000/aysle/baskets/&quot;);
        setPosts(res.data);
        setLoading(false);
      };
      fetchPosts();
    }, []);
    //Get current posts
    const indexOfLastPost = currentPage * postsPerPage;
    const indexOfFirstPost = indexOfLastPost - postsPerPage;
    const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);
  
    //Change Page
    const paginate = (pageNumber) =&gt; setCurrentPage(pageNumber);
  
    //console.log(posts);
    return (
      &lt;div&gt;
        &lt;Posts posts={currentPosts} loading={loading} /&gt;
        &lt;Pagination
          postsPerPage={postsPerPage}
          totalPosts={posts.length}
          paginate={paginate}
        /&gt;
      &lt;/div&gt;
    );
  };
  
  export default Basket;
  </code></pre>
  <p>To display the data in tabular form am using the below code:
  Posts.js:</p>
  <pre><code>import React from &quot;react&quot;;
  import edit from &quot;../images/edit.png&quot;;
  import del from &quot;../images/delete.png&quot;;
  import &quot;./Basket/basket.scss&quot;;
  
  const Posts = ({ posts, loading }) =&gt; {
    if (loading) {
      return &lt;h2&gt;Loading All Baskets....&lt;/h2&gt;;
    }
    return (
      &lt;table className=&quot;basket-view&quot;&gt;
        &lt;thead&gt;
          &lt;tr id=&quot;Baskettr&quot;&gt;
            &lt;th id=&quot;Basketth&quot; colSpan=&quot;4&quot;&gt;
              Here are your Listings...
            &lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr id=&quot;Baskettr&quot;&gt;
            {/* &lt;th id=&quot;Basketth&quot;&gt;Id&lt;/th&gt; */}
            &lt;th id=&quot;Basketth&quot;&gt;Basket Name&lt;/th&gt;
            &lt;th id=&quot;Basketth&quot;&gt;Basket Creation Date&lt;/th&gt;
            &lt;th id=&quot;Basketth&quot;&gt;Basket Modified Date&lt;/th&gt;
            &lt;th id=&quot;Basketth&quot;&gt;Action&lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody id=&quot;Baskettbody&quot;&gt;
          {posts ? (
            posts.length &gt; 0 ? (
              posts.map((post, index) =&gt; {
                return (
                  &lt;tr id=&quot;Baskettr&quot; key={index}&gt;
                    {/* &lt;td id=&quot;Baskettd&quot;&gt;{basket.id}&lt;/td&gt; */}
                    &lt;td id=&quot;Baskettd&quot;&gt;{post.basket_name}&lt;/td&gt;
                    &lt;td id=&quot;Baskettd&quot;&gt;{post.basket_creation_date}&lt;/td&gt;
                    &lt;td id=&quot;Baskettd&quot;&gt;{post.basket_modified_date}&lt;/td&gt;
                    &lt;td&gt;
                      &lt;button id=&quot;delBtn&quot; title=&quot;Edit&quot;&gt;
                        &lt;img src={edit} id=&quot;BtnImg&quot; alt=&quot;Edit&quot; /&gt;
                      &lt;/button&gt;
                      &lt;button id=&quot;editBtn&quot; title=&quot;Delete&quot;&gt;
                        &lt;img src={del} id=&quot;BtnImg&quot; alt=&quot;Delete&quot; /&gt;
                      &lt;/button&gt;
                    &lt;/td&gt;
                  &lt;/tr&gt;
                );
              })
            ) : (
              &lt;tr id=&quot;Baskettr&quot;&gt;
                &lt;td id=&quot;Baskettd&quot;&gt;No Records to Show...&lt;/td&gt;
              &lt;/tr&gt;
            )
          ) : (
            0
          )}
        &lt;/tbody&gt;
      &lt;/table&gt;
    );
  };
  
  export default Posts;
  </code></pre>
  <p>And finally, for pagination I am using the following code:</p>
  <pre><code>import React from &quot;react&quot;;
  
  const Pagination = ({ postsPerPage, totalPosts, paginate }) =&gt; {
    const pageNumbers = [];
    //console.log(totalPosts);
    for (let i = 1; i &lt;= Math.ceil(totalPosts / postsPerPage); i++) {
      pageNumbers.push(i);
    }
    return (
      &lt;nav&gt;
        &lt;ul className=&quot;pagination&quot;&gt;
          {pageNumbers.map((number) =&gt; (
            &lt;li key={number} className=&quot;page-item&quot;&gt;
              &lt;a onClick={() =&gt; paginate(number)} href=&quot;!#&quot; className=&quot;page-link&quot;&gt;
                {number}
              &lt;/a&gt;
            &lt;/li&gt;
          ))}
        &lt;/ul&gt;
      &lt;/nav&gt;
    );
  };
  
  export default Pagination;
  </code></pre>
  <p>Please help me to rectify this issue. Thanks a lot for your time in advance. Here is the <a href="https://codesandbox.io/s/pedantic-morning-71iog?file=/src/App.js" rel="nofollow noreferrer">CodeSandBoxLink</a></p>