title: Custom pagination using ReactJS
body: <p>I have this project for pagination of json data received through an API. The problem is that my code somehow gives me a 'slice' error (it is not the case when using other API's, e.g. <a href="https://corona.lmao.ninja/v2/countries" rel="nofollow noreferrer">https://corona.lmao.ninja/v2/countries</a>) &lt;--- Works fine</p>
  <p>Items.js:</p>
  <pre><code>import React from 'react';
  import { ITEMS_PER_PAGE } from '../utils/constants';
  import Data from './Data';
  
  const Items = ({ items, page }) =&gt; {
    const startIndex = (page - 1) * ITEMS_PER_PAGE;
    const selectedItems = items.slice(startIndex, startIndex + ITEMS_PER_PAGE);
    return (
      &lt;React.Fragment&gt;
        {selectedItems.map(item =&gt; (
          &lt;Data key={item.country} {...item} /&gt;
        ))}
      &lt;/React.Fragment&gt;
    );
  };
  
  export default Items;
  
  </code></pre>
  <p>Data.js:</p>
  <pre><code>import React from 'react';
  
  const Data = ({ Data }) =&gt; {
    const { high, low } = Data;
    return (
      &lt;div class=&quot;data&quot;&gt;
        &lt;p&gt;
          &lt;strong&gt;Test:&lt;/strong&gt; {high} {low}
        &lt;/p&gt;
        &lt;hr /&gt;
      &lt;/div&gt;
    );
  };
  
  export default Data;
  
  </code></pre>
  <p>Pagination.js:</p>
  <pre><code>import React from 'react';
  
  const Pagination = ({ totalPages, handleClick, page }) =&gt; {
    const pages = [...Array(totalPages).keys()].map(number =&gt; number + 1);
  
    return (
      &lt;div className=&quot;numbers&quot;&gt;
        {pages.map(number =&gt; (
          &lt;a
            key={number}
            href=&quot;/#&quot;
            onClick={() =&gt; handleClick(number)}
            className={`${page === number &amp;&amp; 'active'}`}
          &gt;
            {number}
          &lt;/a&gt;
        ))}
      &lt;/div&gt;
    );
  };
  
  export default Pagination;
  </code></pre>
  <p>App.js:</p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import axios from 'axios';
  import Pagination from './components/Pagination';
  import Items from './components/Items';
  import { ITEMS_PER_PAGE } from './utils/constants';
  
  const App = () =&gt; {
    const [items, setItems] = useState([]);
    const [page, setPage] = useState(1);
    const [totalPages, setTotalPages] = useState(0);
    const [isLoading, setIsLoading] = useState(false);
  
    useEffect(() =&gt; {
      setIsLoading(true);
      axios
        .get('https://min-api.cryptocompare.com/data/v2/histoday?fsym=BTC&amp;tsym=USD&amp;limit=10')
        .then(response =&gt; {
          const result = response.data;
          setItems(result);
          setTotalPages(Math.ceil(result.length / ITEMS_PER_PAGE));
          setIsLoading(false);
        });
    }, []);
  
    const handleClick = number =&gt; {
      setPage(number);
    };
  
    return (
      &lt;div&gt;
        &lt;h1&gt;Pagination Demo&lt;/h1&gt;
        {isLoading ? (
          &lt;div className=&quot;loading&quot;&gt;Loading...&lt;/div&gt;
        ) : (
          &lt;React.Fragment&gt;
            &lt;Items items={items} page={page} /&gt;
            &lt;Pagination
              totalPages={totalPages}
              handleClick={handleClick}
              page={page}
            /&gt;
          &lt;/React.Fragment&gt;
        )}
      &lt;/div&gt;
    );
  };
  
  export default App;
  
  </code></pre>
  <p>My problem seems to be something that am I missing with this other API: <a href="https://min-api.cryptocompare.com/data/v2/histoday?fsym=BTC&amp;tsym=USD&amp;limit=10" rel="nofollow noreferrer">https://min-api.cryptocompare.com/data/v2/histoday?fsym=BTC&amp;tsym=USD&amp;limit=10</a></p>
  <p>error: <code>TypeError: items.slice is not a function </code> in Items.js</p>
  <p>Any help would be appreciated!</p>