Breaking News: Grepper is joining You.com. Read the official announcement!

inertiajs pagination react

Condemned Corncrake answered on April 18, 2023 Popularity 5/10 Helpfulness 8/10

answer inertiajs pagination react

inertiajs pagination react

Comment

laravel + inertiajs + ReactJS

// Controller : 
return Inertia::render('Users',[
  'users'  => User::paginate()->through(fn($user) => [ // use through() function
      'id'    => $user->id,
      'name'  => $user->name,
      'email' => $user->email
  ]),
]);

// ReactJS Component : 
import React from 'react'
import { Link } from '@inertiajs/react';  

const Users = ({ users }) => {   
  return (
    <>  
          <h1>Users List:</h1> 
          {/* users.data to access data in db */}
          {
            users.data.map(user => (<div key={user.id}>{user.name}</div>))
          }  
          {/* users.links for pagination */}
          {
            users.links.map(page => (<Link href={`${page.url}`}>{page.label}</Link>))
          } 
      
    </>
  )
}

export default Users

Popularity 5/10 Helpfulness 8/10 Language javascript

Source: Grepper

Tags: inertiajs javascript pagination

Link to this answer
Share Copy Link

Contributed on Apr 18 2023

Condemned Corncrake

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

inertiajs pagination react

Contents

More Related Answers

inertiajs pagination react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.