Level 80
May 30, 2024
12
Level 1
Inertia/React Examples
Hello I like to learn Inertia with React and to display loaded Objects from laravel-controller at react page. Are there any new examples for beginners? All i found has problems and does not work out of the box ? Thanks for any hints
Level 29
@smily You could always start a fresh Laravel Application with the Breeze starter kit that uses Inertia & React. This is a good base to start from: https://laravel.com/docs/11.x/starter-kits#breeze-and-inertia
Level 1
Thanks Martin, these pages i know. I try it with the following example..
In my controller:
public function index(): Response
{
$posts = Post::all();
return Inertia::render('Posts/Index',['posts' => $posts]);
}
In the react index.jsx:
export default function Dashboard(props) {
const { posts } = usePage().props
function destroy(e) {
if (confirm("Are you sure you want to delete this Post?")) {
router.delete(route("posts.destroy", e.currentTarget.id));
}
}
return (
<Authenticated
user={props.auth.user}
errors={props.errors}
header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">Posts</h2>} >
<Head title="Posts" />
<div className="py-12">
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div className="p-6 bg-white border-b border-gray-200">
<div className="flex items-center justify-between mb-6">
{/* <Link
className="px-6 py-2 text-white bg-green-500 rounded-md focus:outline-none"
href={ route("posts.create") }
>
Create Post
</Link> */}
</div>
{ posts }
<table className="table-fixed w-full">
<thead>
<tr className="bg-gray-100">
<th className="px-4 py-2 w-20">No.</th>
<th className="px-4 py-2">Title</th>
<th className="px-4 py-2">Body</th>
<th className="px-4 py-2">Action</th>
</tr>
</thead>
<tbody>
{posts.map(({ id, title, body }) => (
<tr key={id} >
<td className="border px-4 py-2">{ id }</td>
<td className="border px-4 py-2">{ title }</td>
<td className="border px-4 py-2">{ body }</td>
<td className="border px-4 py-2">
{/* <Link
tabIndex="1"
className="px-4 py-2 text-sm text-white bg-blue-500 rounded"
href={route("posts.edit", id)}
>
Edit
</Link> */}
<button
onClick={destroy}
id={id}
tabIndex="-1"
type="button"
className="mx-1 px-4 py-2 text-sm text-white bg-red-500 rounded"
>
Delete
</button>
</td>
</tr>
))}
{posts.length === 0 && (
<tr>
<td
className="px-6 py-4 border-t"
colSpan="4"
>
No contacts found.
</td>
</tr>
)}
</tbody>
</table>
</div>
</div>
</div>
</div>
</Authenticated>
);
}
I got the error:
Uncaught Error: Objects are not valid as a React child (found: object with keys {id, title, body, created_at, updated_at}). If you meant to render a collection of children, use an array instead.
Level 29
@smily Is the auth data in your current project shared via HandleInertiaRequests.php ?
public function share(Request $request): array
{
return [
...parent::share($request),
'auth' => [
'user' => $request->user(),
],
];
}
In your React template try this:
export default function Dashboard(auth, posts) {
function destroy(e) {
if (confirm("Are you sure you want to delete this Post?")) {
router.delete(route("posts.destroy", e.currentTarget.id));
}
}
return (
<Authenticated
user={auth.user}
errors={errors}
header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">Posts</h2>}
>
// rest of your code
Level 1
Hi gych, i don't know where to put the share function or if it is handeld by HandleInertiaRequests
Now i get error: errors is not defined
Level 1
Yes, the auth data is shared via HandleInertiaRequests.php
BTW this example is made with a breeze starter kit
Level 1
I added the errors to the default fubction, the error is gone, i don't know if it is ok?:
export default function Dashboard(auth, posts, errors)
the next thing is:
Uncaught TypeError: posts.map is not a function
I changed the posts.map to:
{posts.map(({ post, index }) => (
<tr key={index} >
<td className="border px-4 py-2">{ post.id }</td>
<td className="border px-4 py-2">{ post.title }</td>
<td className="border px-4 py-2">{ post.body }</td>
....
but doesn't help
Level 29
@smily For what do you need the errors ? What are you displaying as error?
Add a console.log for posts and see which data is has, share the result from the log here.
Level 1
If it doesn't work with such simple things, the whole thing doesn't make any sense to me...
sorry for the effort, what a pity
Level 29
@smily No problem but once you got it right and understand how it works its easy to work with. Personally I stopped using React for new projects few years ago. My first choice now is Vue, it gives me a much better development experience and its faster to work with.
1 like
Level 1
Thanks gych, the only way i was able to get it work was with vue, so i think i will go for it the next try ;)
sry for my English, I didn't pay enough attention at school :)
Glad you're offering help here!
Level 29
@smily No problem! Your English is not that bad, I'm glad I could help :) Vue is also easier to learn, if you have any more questions don't hesitate to reach out. Goodluck !
Please or to participate in this conversation.