Level 63
Then it's a front problem and not a back one. Show your front code.
1 like
Jun 16, 2023
7
Level 2
Show child records - Inertia/ReactJS
I have a "show" page that displays details of a record, from the show() method in the controller. When I try to retrieve the child records in a table, I get a blank section. There's no error in the console. However, when I console.log(records) the data, I get the result. But the component cannot display.
use Inertia\Response as InertiaResponse;
use App\Models\Record;
use App\Models\Patient;
public function show(Patient $patient): InertiaResponse
{
return inertia('Patients/Details', [
'records' => Record::query()->where('patient_id', $patient->id)->get([fields here]),
]);
}
I don't know whether I am supposed to write the eloquent model differently because I think that query should work since the data can display in the console.
Level 2
@vincent15000 This is what I have in my frontend:
import { Tab } from "@headlessui/react"
import TabGroup from "@/Components/TabGroup"
export default function Details (props) {
const { records } = usePage().props
let [categories] = useState({
Records: records
})
return (
<>
<TabGroup categories={categories}>
<Tab.Panel>
<Table>
{records.data.map((record, i) => (
<tr i={record.uuid}>
<td>{record.diagnosis}</td>
<td>{record.doa}</td>
<td>{record.updated_at}</td>
</tr>
))}
</Table>
</Tab.Panel>
</TabGroup>
</>
)
}
The fields in the table are the same as the ones I listed in the get([fields here]) of the eloquent query. The other data in the second tab is showing except for this one.
1 like
Level 63
@Emokores I think that you are not using useState correctly.
Level 2
@vincent15000 actually, that's the way the component is used in the headlesui example because I am using the headlessui component for tabbing. I have three tabs, the rest of the tabs show data except for this one having the child table. I only extracted it into a component.
1 like
Level 2
@vincent15000 Another thing I have noticed is that, even without the tab component, when I put the child table in a separate section on the page, the data doesn't display and still, there's no error. But the data appears in the console.
1 like
Level 63
@Emokores Have a look here and see how the useState hook is used.
https://headlessui.com/react/tabs#controlling-the-active-tab
Once again, I think that you don't use this hook correctly.
1 like
Level 2
@vincent15000 oh, I see that. But why does nothing display even when I put the datatable outside the tab and load the page? This is confusing!!!
1 like
Please or to participate in this conversation.