How can I use MUI pagination?-CodePudding

I'm trying to change the content displayed on screen accordingly with what is selected in pagination, but I am not figuring out how it is done, can someone help me please?

The Api I'm using will change it's value with the page parameter.

The App file follows, it is the only file in the project, this is a small project that I created just to figure out how pagination should work:

import { Typography, Box, Pagination } from "@mui/material";
import axios from "axios";
import { useEffect, useState } from "react";

interface api {
  name: string;
}

function App() {
  //pageApi
  const [pageApi, setPageApi] = useState(1);
  //API
  const [api, setApi] = useState([] as any[]);
  const ApiAddress = axios.create({
    baseURL: "https://swapi.dev/api/people",
  });
  useEffect(() => {
    ApiAddress.get("?page="   pageApi)
      .then((response: any) => setApi(response.data.results))
      .catch((err: any) => console.log(err));
  }, []);

  return (
    <>
      <Typography>App</Typography>

      <br />
      {api.map((apiElement) => (
        <Box key={apiElement.name}>{apiElement.name}</Box>
      ))}
      <br />
      <br />

      <Pagination count={10} />
    </>
  );
}

export default App;

CodePudding user response：

function App() {
  //pageApi
  const [pageApi, setPageApi] = useState(1);
  //API
  const [api, setApi] = useState([] as any[]);
  const ApiAddress = axios.create({
    baseURL: "https://swapi.dev/api/people"
  });
  useEffect(() => {
    ApiAddress.get("?page="   pageApi)
      .then((response: any) => setApi(response.data.results))
      .catch((err: any) => console.log(err));
  }, [pageApi]);

  return (
    <>
      <Typography>App</Typography>

      <br />
      {api.map((apiElement) => (
        <Box key={apiElement.name}>{apiElement.name}</Box>
      ))}
      <br />
      <br />

      <Pagination count={10} onChange={(e, value) => setPageApi(value)} />
    </>
  );
}