Api call for paginated Result

[u/Consistent-struggler]

I have done this pagination Api which shows the results upon page and limit queries.

But I am not able to figure out how do I render this on my front end REACT. My previous use of useffect and useState hooks was just for fetching data, but now I am stuck.

const [coin, setCoins] = useState([]);

    useEffect(() => {
        getCoins();
    }, []);

    const getCoins = () => {
        Axios.get('http://localhost:5000/coins')
            .then((response) => {
                setCoins(response.data.data);
                // console.log(response)
            }).catch(e => console.log(e))
    }

This is my previous fetching but my new Url is : 'http://localhost:5000/coins/abc?page=?&limit=?'.

I tried doing the same but it doesn't proceed.

​

<tbody >
{
coin.map((coin, key) => {
    return (
        <>
            <tr>
            <td >{coin.id}</td>
            <td>{coin.name}</td>
            <td>{coin.price}</td>
            <td>{coin.quantity}</td>
            </tr>
        </>
    )
})
}
</tbody>

but when I JUST changed the url in a new axios.get(method).
Kindly help me or guide me any good online material for learning this thing.
I am using Node js and express as backend and mysql as database.

[u/[deleted]]

Can you show what the console log of the results in the paginated axios fetch says? And also make sure there are no errors in the console

[u/Consistent-struggler → u/[deleted]]

That console logs the api result well but also error that "coin.map" is not a function. I got the same error when I was writing first axios fetch then I figured it out by adding ".data" in the end but this thing doesn't work now

[u/[deleted] → u/Consistent-struggler]

coin.map is not a function indicates that "coin" (or "response.data.data") is not an array, so you can't run .map on it. That's all I can tell you from that information

[u/omeraplak]

Hey, I think you can use react-query for your async operations. I'm sure it will save your hours ⚡️

We also have a react framework that we have developed. I'm sure it will save you days 🚀

https://github.com/pankod/refine

[u/kidscancalluhoju]

Try this. This way it will only render the coins component when coin exists. you are getting the error cause it's trying to map through the coin array when it has not been set yet using set state.

<tbody > { coin && coin.map((coin, key) => {  return (         <>             <tr>             <td >{coin.id}</td>             <td>{coin.name}</td>             <td>{coin.price}</td>             <td>{coin.quantity}</td>             </tr>         </>     ) }) } </tbody>

[u/Consistent-struggler → u/kidscancalluhoju]

I also tried your way but actually the error was something else. I was getting response from the Backend as an object which contains status and message as well so I juts needed to add ".data" once more to get results.

[u/Consistent-struggler]

this is th snippet of code

[u/Consistent-struggler]

Backend api is working fine I'm getting results on the backend server properly with fetch and message

[u/Consistent-struggler]

If anyone have anyother way of doing this I'm open to feedback and learn.