I am currently in the process of developing a simplistic fictional sneaker application with the MERN stack. While I wouldn't classify myself as a beginner, I'm also not an expert. I successfully created the backend and generated a json rest-api. However, my struggle lies within the frontend development. My primary issue is trying to access a specific property from an object using console.log.
For instance, let's say I have a route that retrieves an array of sneaker objects. Each object contains details such as the Sneaker Model, Colorway, and Year of release as shown below:
{
"_id": "5c5dff42489e28576c28cd9e",
"model": "Air Jordan 11",
"colorway": "Win Like 82",
"year": 1997,
...
}
I utilized destructuring to extract the sneaker data from my application (Redux) state:
const { sneakers } = this.props.sneaker;When attempting to log the array of objects using console.log(sneakers), I get the expected results:
(3) [{…}, {…}, {…}]
...
If I wish to access only the second sneaker in the array, I can achieve this by using:
console.log(sneakers[1])
This returns the details of the second sneaker as anticipated. However, when endeavoring to obtain a single property from a specific sneaker like the colorway from the second sneaker, by executing:
console.log(sneakers[1].colorway)An error occurs:
TypeError: Cannot read property 'colorway' of undefinedThis issue has left me perplexed, as I assumed that if I could access the entire data of one sneaker, extracting a singular property should be straightforward. There appears to be a mistake in my approach, but identifying it has proven to be challenging.