Laravel 12 React Pagination & Search Tutorial (Full Stack Guide 2026)

Laravel 12 React Pagination & Search Tutorial: In this guide, we will build a full stack application using Laravel 12 API and React frontend with pagination and search functionality.

This feature is used in real-world applications like admin panels, dashboards, and data tables.

📌 What You Will Build

• Display posts with pagination
• Search posts dynamically
• API + React integration

Step 1. Update API for Pagination & Search

public function index(Request $request)
{
    $query = Post::query();

    // Search
    if ($request->search) {
        $query->where('title', 'like', '%' . $request->search . '%');
    }

    // Pagination
    $posts = $query->latest()->paginate(5);

    return response()->json($posts);
}

Step 2. API Route

Route::apiResource('posts', PostController::class);

Step 3. React Component

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

function App() {
  const [posts, setPosts] = useState([]);
  const [search, setSearch] = useState("");
  const [page, setPage] = useState(1);
  const [lastPage, setLastPage] = useState(1);

  useEffect(() => {
    fetchPosts();
  }, [page, search]);

  const fetchPosts = () => {
    axios.get(`/api/posts?page=${page}&search=${search}`)
      .then(res => {
        setPosts(res.data.data);
        setLastPage(res.data.last_page);
      });
  };

  return (
    <div>
      <h2>Laravel React Pagination & Search</h2>

      {/* SEARCH */}
      <input
        type="text"
        placeholder="Search..."
        value={search}
        onChange={(e) => {
          setSearch(e.target.value);
          setPage(1);
        }}
      />

      {/* DATA */}
      {posts.map(post => (
        <div key={post.id}>
          <h3>{post.title}</h3>
          <p>{post.description}</p>
        </div>
      ))}

      {/* PAGINATION */}
      <div>
        <button disabled={page === 1} onClick={() => setPage(page - 1)}>
          Prev
        </button>

        <span> Page {page} </span>

        <button disabled={page === lastPage} onClick={() => setPage(page + 1)}>
          Next
        </button>
      </div>

    </div>
  );
}

export default App;

Step 4. Run Project

npm run dev
php artisan serve

🔥 How It Works

• Search updates API query dynamically
• Pagination loads limited data (5 per page)
• React state controls UI

✅ Real Use Case

• Admin dashboards
• Product listings
• User management panels

🚀 Advanced Improvements

• Debounce search input
• Add sorting (ASC/DESC)
• Use React Table library
• Add loading spinner

🎯 Conclusion

You have successfully implemented pagination and search in a Laravel 12 + React application. This is a real-world feature used in almost every modern web app.

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

Haresh Chauhan

(Co-Founder)