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.