I am using react router to navigate to another page and pass state to that page using this inside useMemo
const columns = React.useMemo(
() => [
{
Header: "Actions",
id: "actions",
Cell: (tableProps) => {
return (
<>
<Link
to={{
pathname: "list-table/list-table-edit",
state: { selectedRow },
}}
>
<span
style={{
cursor: "pointer",
color: "grey",
textDecoration: "underline",
}}
onClick={(event) => {
setSelectedID(tableProps.row.original.asset_ID);
}}
>
<Tooltip title="Edit Row">
<EditButton aria-label="edit">
<CreateIcon fontSize="small" />
</EditButton>
</Tooltip>
</span>
</Link>
</>
);
},
},
...MakeTableColumns,
],
[selectedRow]
);
My state are declared like this
const [selectedID, setSelectedID] = useState();
const selectedRow = oriData.find((row) => row.asset_ID === selectedID);
when user click Edit
, it will set row ID to selectedID
and selectedRow
finds row values and pass to list-table-edit
page.
however, when I console.log props.location.state
from list-table-edit
, it's showing undefined
. When I take out <Link> ..
outside of useMemo
and give a status id, it is working fine, I think it's something wrong with useMemo
.
If anyone could help, I would be very much appreciated, thanks
Updated
Now I change from state: { selectedRow }
to state: { tableProps.row.original }
and pass to another page and it works without passing the state. I could have already had the selected row value by calling tableProps.row.original
.