How can I implement pagination in a React app using an API?

How can I implement pagination in a React app using an API?

You can use libraries like Axios to fetch data from your API and manage pagination with state in React.

What state management approach should I use for pagination?

You can use React's built-in state management with useState or a more complex solution like Redux if your app is large.

Can you show me a code example?

Sure! Here's a simple example:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const PaginatedList = () => {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);

  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(`https://api.example.com/data?page=${page}`);
      setData(result.data);
    };
    fetchData();
  }, [page]);

  return (
    <div>
      {data.map(item => <div key={item.id}>{item.name}</div>)}
      <button onClick={() => setPage(page - 1)}>Previous</button>
      <button onClick={() => setPage(page + 1)}>Next</button>
    </div>
  );
};

This will fetch data based on the current page.

What if I want to add a loading spinner?

You can add a loading state to your component. Set a loading state to true before fetching data and false after.