Passing state to another component

Question

In my MUI Table I navigate the user to another page when is clicked over the row. Is there a option to pass the data from the row directly with useNavigate, instead of using localStorage ?

  <TableBody>
                    {data &&
                        data.map((row, index) => (
                            <TableRow
                                hover
                                key={index}
                                onClick={(e) => {
                                    navigate('/assets-list') // <====== From here it Start 
                                     window.localStorage.setItem('selectedAsset', row); 
                                }}
                                sx={{ cursor: 'pointer' }}
                            >
                                <TableCell size="small">
                                    <Typography align="left" variant="subtitle1" component="div">
                                        {row.ASSET_NAME}
                                        <Typography variant="subtitle2">{row.ASSET_TYPE_NAME}</Typography>
                                    </Typography>
                                </TableCell>
                                <TableCell>
                                    <Typography align="left" variant="subtitle1" component="div">
                                        {row.BRAND}
                                    </Typography>
                                </TableCell>
                            </TableRow>
                        ))}
                </TableBody>

Answer 1

You can pass state in useNavigate hook as an optional second argument.

onClick={(e) => {
  navigate('/assets-list', { state: row })
}}

Which we'll be accessible in your AssetsList component by using useLocation hook:

const { state } = useLocation();
console.log(state);