title: ReactJS Pagination React Hooks
body: <p>Hello everyone i have curd with react and node and i want to add pagination , now displays all the card Non-stop</p>
  <p>This code now
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  import React from 'react';
  import { Grid, CircularProgress } from '@material-ui/core';
  import { useSelector } from 'react-redux';
  
  import Post from './Post/Post';
  import useStyles from './styles';
  
  const Posts = ({ setCurrentId }) =&gt; {
    const posts = useSelector((state) =&gt; state.posts);
    const classes = useStyles();
  
    return (
      !posts.length ? &lt;CircularProgress /&gt; : (
        &lt;Grid className={classes.container} container alignItems="stretch" spacing={3}&gt;
          {posts.map((post) =&gt; (
            &lt;Grid key={post._id} item xs={12} sm={6} md={6}&gt;
              &lt;Post post={post} setCurrentId={setCurrentId} /&gt;
            &lt;/Grid&gt;
          ))}
        &lt;/Grid&gt;
      )
    );
  };
  
  export default Posts;</code></pre>
  </div>
  </div>
  </p>
  <p>this code i try</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  import React from 'react';
  import { Grid, CircularProgress } from '@material-ui/core';
  import { useSelector } from 'react-redux';
  
  import Post from './Post/Post';
  import useStyles from './styles';
  
  const Posts = ({ setCurrentId }) =&gt; {
    const posts = useSelector((state) =&gt; state.posts);
    const classes = useStyles();
    const [pageNumber, setPageNumber] = useState(0);
  
    const usersPerPage = 10;
    const pagesVisited = pageNumber * usersPerPage;
  
    const displayUsers = users
  
    return (
      !posts.length ? &lt;CircularProgress /&gt; : (
        &lt;Grid className={classes.container} container alignItems="stretch" spacing={3}&gt;
      .slice(pagesVisited, pagesVisited + usersPerPage)
      post.map((user) =&gt; {
            &lt;Grid key={post._id} item xs={12} sm={6} md={6}&gt;
              &lt;Post post={post} setCurrentId={setCurrentId} /&gt;
            &lt;/Grid&gt;
          }
        &lt;/Grid&gt;
      )
    );
  };
  
  export default Posts;</code></pre>
  </div>
  </div>
  
  this Tutorial i try to learn <a href="https://www.youtube.com/watch?v=HANSMtDy508" rel="nofollow noreferrer">https://www.youtube.com/watch?v=HANSMtDy508</a>
  I would be happy for help or a source of information to help me</p>