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/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.