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])

const Dashboard = ({ match, data }) => {
  console.log(data.length);
  console.log(data[0]);
};

If you call the above Dashboard, what displays to the console?

With the way your function is written, you are passing in a single object and extracting two properties (match and data) from the object (using destructuring).

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.

Just to clarify, the console.log is inside the Dashboard function?

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>;
};

If data is the array, then where is match defined?

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

I could be wrong, but it appears id in the data object is a number and id of the params object is a string. Since you are using === instead of ==, you will not get a match, which might explain why movie was a blank array.

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

Absolutely. The longer you stare at something, the easier it is to miss also.

What is the exact error message?

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.

I would need to see how/where it is being referenced. These kinds of questions are much easier when we can see all your code instead of just posting snippets.

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>;
};