Pagination

import { Pagination } from "@mui/material";
import React, { useState } from "react";

function PaginationLearn() {
  const [data, setData] = useState([]);
  const [page, setPage] = useState(1);

  const getData = (pageNumber) => {
    fetch(`https://jsonplaceholder.typicode.com/users?page=${pageNumber}`)
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => console.error(error));
  };

  React.useEffect(() => {
    getData(1);
  }, []);

  const handleChange = (event, value) => {
    setPage(value);
    getData(value);
  };

  return (
    <div>
      Pagination
      <Pagination count={3} page={page} onChange={handleChange} />
      {data.map((item) => (
        <div key={item.id}>
          <h2>{item.name}</h2>
          <p>{item.username}</p>
        </div>
      ))}
    </div>
  );
}
export default PaginationLearn;