Level 8
@hamzaqureshi16 when showing your code, it's better to wrap them in triple backticks (`) for readability.
Here's an example:
```
// your code here
```
1 like
Jun 10, 2023
6
Level 1
InertiaJS, ReactJS props undefined
So, I'm using ineritajs with react to build an application, but now i need props, I'm trying to pass props to my component like this
Route::get('/sendprop',function(){
return Inertia::render('tst',["test"=>'test']);
})->name('sendprop');
and this is my react component
import React from 'react'
import { Link } from 'react-router-dom'
export default function tst({test}) {
return (
<div>
<h1>this is {test}</h1>
<Link to={'/'}>
<button className="btn btn-danger rounded-4">Go Back</button>
</Link>
</div>
)
}
this is my first large project with inertia and i have built a small application for learning but passing props there like this worked, I don't know why it isn't working not but the props I'm passing return undefined in the react component.
Level 8
but passing props there like this worked
In your post, I don't see that you accept props in your React code. Please include the whole code if you mind. And also, have you heard about the Laravel Bootcamp? Check how to accept props here.
Level 1
@NoLAstNamE It does, but when I posted the question I was really fidgeting around with the code, but I've edited it now, still the problem persists.
Level 51
That what I would do to test:
- Make sure you're rendering the right component. What's the output of your code?
- Try to re-run your npm process.
Level 1
@MohamedTammam Well, the correct component is being rendered, this is just a test route with test components to solve the problem. The component is being rendered correctly but the prop 'test' is undefined in it. I did try to re-run the npm process but to no avail.
Level 1
So apparently problem was my app.jsx setup, I had excluded <App prop={...props}/>
<BrowserRouter>
<App {...props} />
<Routes>
<Route path="/" element={<OurRegister />} />
<Route path="/login" element={<OurLogin />} />
<Route path='/forgotpassword' element={<ForgotPassword/>}/>
</Routes>
</BrowserRouter>
Please or to participate in this conversation.