Cant access object properties retrieved via API with error message TypeError: Cannot read property '' of undefined - Nextjs/JavaScript

Question

I have a problem that appears to be unique to NextJs.

I am hitting an API through a useHook and retrieving the results. What I get back is an array of objects. Everything works fine and I can console.log the entire result (Array of objects).

  const mymoviegenreobjects = useFetchNavBarCatagories();

[{ "id": "1", "name": "Adventure", }, { "id": 2, "name": "Horror" }, { "id": 3, "name": "Action" }]

Then I filter the array of objects so that I can find which object has a name key that is = to 'Adventure'. That also works fine and I am able to extract the object which has the name key = to "Adventure" and now what I get back is an array with one object inside (the correct one).

 const avengers = mymoviegenreobjects.filter(
    (character) => character.name === "Adventure"
  );

[{ "id": "1", "name": "Adventure", }]

Then to access the correct element of the array I use the [0] method which allows me to console.log just the first object. However when I want to console.log the first object.id which I do like thi

   console.log("The ID for Avengers is", avengers[0].id)

I get this error.

Server Error TypeError: Cannot read property 'id' of undefined

I am not sure why this is happening as this is the correct way to access the element in an array of objects, then a particular element within the selected object.

I have read some very vague explanation [link below] but I was unable to make out why this was actually happening and how to solve it. Furthermore, I've also read elsewhere that process.window is a deprecated function and should not be used.

So my question is how would I access the ID property of my object so that I would be able to console.log it and/or store it in a different variable.

Any help would be great. Thanks.

Next.js TypeError: Cannot read property '' of undefined when trying to console log api results

I have added a code sandbox to help you understand my error and what I am trying to do. Please disregard all my commented out stuff as I am just playing around and trying to do different stuff. Link is below.

https://codesandbox.io/s/modest-neumann-2x6iff

What I am trying to do is access the individual properties of the last console.log (This is avangers two)

The code for the log can be found in the usefetchMovieGenreResults hook.

I also tried to implement painting the object on the screen on the MovieGenreResults component just to see what happens but it does not work (as expected). I used the hook above to feed it. Ideally I would use the. notion to access the specific element I want to paint however it gives me an error.

Answer 1

can you make a codesandbox? It seems you're using next.js, calling the api on the server but logging the result in the jsx, you need to receive props to the component to achieve that next.js server side data fetching