title: React - Cloud FireStore - How can I add pagination to this component?
body: <p>I'm trying to add a simple pagination for this React component.</p>
  <p>First I run a query to find out the total number of documents in the collection.
  Next, inside useEffect, I run a second query to show the data. Ideally it should show 10 documents on each page.</p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import { db } from '../firebase';
  import UpdateCard from './UpdateCard';
  
  const List = () =&gt; {
    const [cards, setCards] = useState([]);
    const [beginAfter, setBeginAfter] = useState(0);
    const [totalDoclNumbers, setTotalDoclNumbers] = useState(0);
  
    const docLimit = 10;
  
    const firstFetch = async () =&gt; {
      const data = await db
        .collection('FlashCards')
        .get();
      setTotalDoclNumbers(data.docs.length);
      console.log('totalDoclNumbers is: ' + totalDoclNumbers);
    };
  
    firstFetch();
  
    useEffect(() =&gt; {
      const fetchData = async () =&gt; {
        const data = await db
          .collection('FlashCards')
          .orderBy('customId', 'asc')
          .limit(docLimit)
          .startAfter(beginAfter)
          .get();
        setCards(data.docs.map((doc) =&gt; ({ ...doc.data(), id: doc.id })));
  
      };
      fetchData();
    }, [beginAfter]);
  
    // Creating a menu for our documents (100 documents per each menu)
    const RenderDocumentMenu = () =&gt;
      Array(totalDoclNumbers / docLimit)
        .fill()
        .map((_, i) =&gt; {
          const onClick = () =&gt; setBeginAfter(docLimit * i);
          return (
            &lt;div key={i} className='document__set' onClick={onClick}&gt;
              {docLimit * i + 1} to {docLimit * i + docLimit} Data
            &lt;/div&gt;
          );
        });
  
    return (
      &lt;&gt;
        &lt;div className='document'&gt;
          &lt;RenderDocumentMenu /&gt;
        &lt;/div&gt;
  
        &lt;ul className='list'&gt;
          {cards.map((card) =&gt; (
            &lt;li key={card.id} className='list__item'&gt;
              &lt;UpdateCard card={card} /&gt;
              &lt;DeleteCard card={card} /&gt;
            &lt;/li&gt;
          ))}
        &lt;/ul&gt;
        &lt;AddCard /&gt;
      &lt;/&gt;
    );
  };
  
  export default List;
  </code></pre>
  <p>But when I run the code I get this error: <strong>RangeError: Invalid array length</strong>
  On the following line:
  const RenderDocumentMenu = () =&gt;</p>