React Pagination: Interview Questions and Machine Coding Round

React Pagination | React Interview Questions | Machine Coding Round

Pagination is a common UI pattern in web applications, especially for displaying large sets of data. In React, pagination can be implemented using components and state management to handle the display of data in smaller, more manageable chunks.

In this tutorial, we will cover how to implement pagination in a React application using HTML tags. We will also discuss some common interview questions related to React pagination and machine coding rounds where you may be asked to implement pagination logic.

Step 1: Creating a Pagination Component
First, we need to create a Pagination component that will handle the logic for displaying and navigating through pages of data. We can create a new file named Pagination.js in our components directory and add the following code:

import React from 'react';

const Pagination = ({ currentPage, totalPages, onPageChange }) => {
  const pages = [...Array(totalPages).keys()].map((page) => page + 1);

  return (
    <div className="pagination">
      {pages.map((page) => (
        <button
          key={page}
          className={page === currentPage ? 'active' : ''}
          onClick={() => onPageChange(page)}
        >
          {page}
        </button>
      ))}
    </div>
  );
};

export default Pagination;

In the Pagination component, we receive three props: currentPage, totalPages, and onPageChange. The totalPages prop represents the total number of pages, while the onPageChange prop is a callback function that will be called when a user clicks on a page number. We generate an array of page numbers using Array.from and map over them to render a button for each page. The active class is applied to the button corresponding to the current page, and the onClick event triggers the onPageChange function with the selected page number.

Step 2: Implement Pagination Logic in Your App
Now that we have our Pagination component, we can use it in our main App component to display a list of items with pagination. Here’s an example of how you can implement pagination logic in your app:

import React, { useState } from 'react';
import Pagination from './Pagination';

const App = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const itemsPerPage = 10;
  const totalItems = 100;
  const totalPages = Math.ceil(totalItems / itemsPerPage);

  const onPageChange = (page) => {
    setCurrentPage(page);
  };

  // Simulate fetching items from an API
  const getItems = () => {
    const startIndex = (currentPage - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    return [...Array(totalItems).keys()].slice(startIndex, endIndex);
  };

  return (
    <div>
      <h1>Items</h1>
      <ul>
        {getItems().map((item) => (
          <li key={item}>Item {item}</li>
        ))}
      </ul>
      <Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={onPageChange} />
    </div>
  );
};

export default App;

In this example, we define the currentPage, itemsPerPage, totalItems, and totalPages constants to represent the current page, number of items per page, total number of items, and total number of pages, respectively. We also define an onPageChange function to update the currentPage state when a user clicks on a page number.

The getItems function simulates fetching items from an API by slicing the array of total items based on the current page and items per page. We render the list of items and the Pagination component in the App component, passing the necessary props to the Pagination component.

Step 3: Styling Pagination
To make the pagination buttons more visually appealing, you can add some CSS styles to your project. Here’s an example of some basic styling for the pagination buttons:

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination button {
  padding: 5px 10px;
  margin: 0 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
}

.pagination button.active {
  background-color: #007bff;
  color: #fff;
}

You can add these styles to your main CSS file or create a new CSS file specifically for your Pagination component.

Common Interview Questions on React Pagination
When preparing for a React interview, you may come across questions related to pagination implementation. Here are a few common questions and possible answers:

1. What is pagination?
   Pagination is the process of dividing a large set of data into smaller, more manageable chunks (pages) for easier navigation and improved performance.

2. How would you implement pagination in a React application?
   To implement pagination in a React application, you can create a Pagination component that handles the display and navigation of pages. The component can receive prop values for currentPage, totalPages, and onPageChange to manage the pagination logic.

3. What are the benefits of using pagination in a web application?
   Pagination helps improve user experience by breaking up large sets of data into digestible chunks, reducing page load times, and providing users with more control over navigating through content.

Machine Coding Round Exercise
In a machine coding round for a React position, you may be asked to implement pagination logic within a limited time frame. A typical exercise might involve creating a Pagination component and integrating it into an existing app to display a list of items with pagination.

To prepare for machine coding exercises, practice implementing pagination logic in React using different approaches and scenarios. You can also try coding exercises on online platforms like LeetCode, HackerRank, or CodeSignal to sharpen your skills and problem-solving abilities.

Conclusion
In this tutorial, we covered how to implement pagination in a React application using HTML tags and components. We discussed creating a Pagination component, implementing pagination logic, styling the pagination buttons, and common interview questions related to React pagination.

Pagination is a fundamental UI pattern that is commonly used in web applications to improve user experience when working with large datasets. Understanding how to implement pagination in React can be a valuable skill for front-end developers and can help you ace React interviews and machine coding rounds. Practice implementing pagination logic in your projects to enhance your skills and prepare for coding challenges in the future.