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

Question

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.

Have you validated that selectedRow is defined in the component with the link? Can you provide a more complete code example? Provide code for both the linking component and the linked-to component? What version of react-router/react-router-dom are you using? — Drew Reese
I am adding it in useMemo hook for making tables, I took it outside of useMemo hook and it's working, seems like it's with useMemo hook. I will update my question. — Kaung Khant Zaw
So is selectedRow in the functional component body and recomputed each render cycle? I think we still need more context. More of this component's code, and the code for the component trying to access route state. It still isn't confirmed if selectedRow has the value you want when the link is clicked. — Drew Reese
It could be because selectedRow doesn't have the value when link is clicked inside useMemo, this is the full code of the component if you wanna check. codesandbox.io/s/confident-dirac-jhqp0?file=/src/App.js I declared those states on top. — Kaung Khant Zaw
If you logged selectedRow in the memo hook before returning the column array do you see it updating with the updates to state in the main component? — Drew Reese

Ankesh Ramani Ankesh Ramani · Accepted Answer · 2020-10-15T06:09:33

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

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

1 Answers