State is undefined when used in react router link inside useMemo hook

549 Views Asked by At

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.

1

There are 1 best solutions below

1
On
<Link to={{ pathname: '/list-table/list-table-edit', state: { record: selectedRow} }}>My route</Link>