I wrote React function to render table. That's how the table looks.
As a parameter it takes JSON:
{
"id": 1,
"firstName": "Richard",
"lastName": "Morrison",
"numberOfAccidents": 1
},
{
"id": 3,
"firstName": "Gregory",
"lastName": "House",
"numberOfAccidents": 5
}
Part of Table function which render rows:
<tbody {...getTableBodyProps()}>
{rows.map((row) => {
prepareRow(row)
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
})}
</tr>
)
})}
</tbody>
I want to add link to '/patient/$id' to each row. I tried to write something like:
return <td to={‘/patient/’ + cell.getCellProps().data.id} {...cell.getCellProps()}>{cell.render('Cell')}</td>
and
const handlerRowClick = (row) => { history.push(`/patient/${row.original.id}`); }
...
return <td onClick={() => handlerRowClick(row)} {...cell.getCellProps()}>{cell.render('Cell')}</td>
but it doesn't work. I would like to ask for advice or links which can help me to solve my problem.
You should use NavLink comopenent in react-router-dom.
import { NavLink } from "react-router-dom";
<td {...cell.getCellProps()}>
<NavLink to={`/patient/` + cell.getCellProps().data.id}>
{cell.render("Cell")}
</NavLink>
</td>