Coingecko pagination. Mission impossible

Question

I'm trying do create a load more functionality, to load more coins from coingecko API.

I did a few attempts but I still get the same first 10 coins..(

I identified a solution with the introduction of the answer in the Set like setCoins(new Set[...coins, response.data]) but it seems to be a bad practice.

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';

import CoinItem from '../CoinItem/CoinItem';
import Coin from '../routes/Coin';
import Spinner from '../Spinner/Spinner'

import './Coins.css';


const Coins = () => {

    const [isloading, setIsLoading] = useState(true)
    const [coins, setCoins] = useState([]);
    const [limit, setLimit] = useState(10)
    const [page, setPage] = useState(0);


    // const url = 'https://api.coingecko.com/api/v3/coins/markets?vs_currency=eur&order=market_cap_desc&per_page=100&page=1&sparkline=false

    useEffect(() => {
        const fetchAll = async () => {
            await axios.get(`https://api.coingecko.com/api/v3/coins/markets?vs_currency=eur&order=market_cap_desc&page=${page}&per_page=${limit}`).then((response) => {
                setCoins([...coins, ...response.data])
                console.log(response)
            }).catch(error => {
                console.log(error)
            })
            setIsLoading(false)

        }


        fetchAll()
    }, [page])


    const loadMore = (page, limit) => {
        setPage(page + 1)
        setLimit(limit + 10)
    }

    if (isloading) {
        return <Spinner />
    }

    return (
        <div className='container'>
            <div>
                <div className='heading'>
                    <p>#</p>
                    <p className='coin-name'>Coin</p>
                    <p>Price</p>
                    <p>24h</p>
                    <p className='hide-mobile'>Volume</p>
                    <p className='hide-mobile'>Mkt Place</p>
                </div>

                {coins.map(coins => {
                    return (
                        <Link to={`coin/${coins.id}`} element={<Coin />} key={coins.id}>
                            <CoinItem coins={coins} />
                        </Link>
                    )
                })}
                <button onClick={loadMore}>Load More</button>
            </div>
        </div>
    );
};

export default Coins;

Answer 1

I figured it out, it should be like this

const loadMore = () => {
        setPage(page => page + 1)
    }

    useEffect(() => {
        const fetchAll = async () => {
            await axios.get(`https://api.coingecko.com/api/v3/coins/markets?vs_currency=eur&order=market_cap_desc&page=${page}&per_page=10`).then((response) => {
                setCoins(coins => [...coins, ...response.data])
                console.log(response)
            }).catch(error => {
                console.log(error)
            })
            setIsLoading(false)

        }


        fetchAll()
    }, [page])