0

In a list component I have passed data via Link, like so

playListState.map((list) => {
  return (
    <>
      <Link
        to={`/playlists/${list.id}`}
        state={{ from: list }}
        key={list.id}
      >
        <p>{list.title}</p>
      </Link>

Then in the component that I want to use the props from the data that I passed. I try to get them via useLocation like so,

const location = useLocation();
const { title, songs,  } = location.state as PlayList; 
console.log(location.state, "location");

PlayList are the props of the data I am passing. In the log I see the state that I am passing but when I log title it's undefined. I have looked online and tried to implement a few things, but without success. So how can I get the data that a passed and display it in my component?

Drew Reese
  • 165,259
  • 14
  • 153
  • 181
lydia michael
  • 19
  • 5
  • The data is passed in route state is passed on `state.from`, so it should be accessed from `state.from` in the receiving component. Does this make sense? – Drew Reese Aug 29 '22 at 18:48
  • Thank you! I understand what you saying but when i do this ``` const { from } = location.state console.log(from.title, "location"); ``` from is giving me the following error TS2339: Property 'from' does not exist on type 'unknown' – lydia michael Aug 29 '22 at 19:08
  • Try typing the `state` object, i.e. `const { from } = location.state as /* type declaration with from */`. It should be something like `interface RouteState { from: PlayList; }` or similar, and then `const { from } = location.state as RouteState`. – Drew Reese Aug 29 '22 at 19:49

0 Answers0