Filter method is not working as expected

I don’t know what’s going but the following code is not working as expected:

const Dashboard = ({ match, data }) => {
  const movie = data.filter(m => m.id === match.params.id);
  console.log(movie);

  console.log(match.params.id);

  return <h1>Dasboard movie {match.params.id}</h1>;
};

Why am I getting an empty array? Besides if I type this console.log(data[0].id) I get an error in the console? What’s going on here?

Hey, what exactly are you passing in as “data”?

An array of objects, each object has an unique id property.
console.log(data[0])

console.log(data.length) // output: 200
console.log(data[0]) // output: {vote_count: 1645, id: 335983, video: false, vote_average: 6.6, title: "Venom", …}

Those are the right values, but I still don’t know why console.log(data[0].id) gives me an error, and of course still confused as of why filter is not returning anything at all.

In case it’s relevant, I’m using routing and passing the props to the Dashboard component:

<Route
  path="/movie/:id"
  render={props => <Dashboard data={filtered} {...props} />}
 />

I don’t know if I’m missing something here.

const Dashboard = ({ match, data }) => {
  const movie = data.filter(m => m.id === match.params.id);
  console.log(data.length);
  console.log(data[0]);

  return <h1>Dasboard movie {match.params.id}</h1>;
};

Match is a property that you pass down to components when you use <Route />

Here you can see all the props of the Dashboard component

And you are not wrong my friend, woa this feels like such a noob mistake hahaha facepalm

Thanks, you saved me from something I don’t think I would’ve seen any time soon. Just out of curiosity, does this happen to people? They cannot see simple things like this until they spend hours trying to figure something out, geez…

By the way, why this console.log(data[0].id) gives me an error?

All the time. Sometimes i come back few days later and then facepalm

1 Like

Uncaught TypeError: Cannot read property ‘id’ of undefined

Well, there you go. I was confused too and tried finding a problem haha.

As for the error when consoling data object, try running debugger (just put in “debugger” without quotes somewhere before the return statement) and refresh the page. You’ll get access to a lot of details (you can hover over them, at least in Chrome) and to the function’s scope, you can even use the console in the browser and access that scope.

Sure.

const Dashboard = ({ match, data }) => {
  const movie = data.filter(m => m.id == match.params.id);
  console.log(data[0].id);

  return <h1>Dasboard movie {match.params.id}</h1>;
};