I can't access an object property inside event

[felipe1234-dev]

Hi, I am using React with Pannellum. In component B, which is a child of component A, I have this method:

const loadScene = sceneId => { console.log(CONFIG[period].scenes[sceneId]); // works pano.loadScene(sceneId); setBig(false); }

"pano" is a global variable and holds the pannellum object. "CONFIG" is also another global variable that keeps the object that I used to generate my panorama.

Inside component A, we have this inside useEffect():

pano.on("scenechange", newScene => { console.log(CONFIG[period].scenes[newScene]); // doesn't work // error: Uncaught TypeError: Cannot read properties of undefined (reading 'scenes') // at :185:42 // at fireEvent (pannellum.js?ver=2.5.6:4796) // at loadScene (pannellum.js?ver=2.5.6:3980) // ... });

"period" exists in both components.

I don't know why this happens nor if it's actually a bug or not. I tried looking at fireEvent but I don't understand its code.

[mpetroff]

This looks like an issue with your code / with React, not with Pannellum. Based on the error, CONFIG[period] is undefined. You should make sure the period key actually matches one of the keys in CONFIG.

[felipe1234-dev]

Yeah, I actually made sure, when I console.log period, CONFIG, CONFIG[period] and CONFIG[period].scenes all separately and inside the loadScene function (which is in another component) they all work. But when I do the same inside "scenechange" event, only the last one (CONFIG[period].scenes) doesn't work. When I console.log period in both functions they happen to be the same. So it seemed to be a problem with "scenes" property, maybe because of its name, but when I tried changing its name (by copying the object inside the event with JSON.stringify -> JSON.parse) to something like "sc3n3s" it stills doesn't work. So, in short:

const loadScene = sceneId => { console.log(period); // ok console.log(CONFIG); // ok console.log(CONFIG[period]); // ok console.log(CONFIG[period].scenes); // ok }

pano.on("scenechange", newScene => { console.log(period); // ok console.log(CONFIG); // ok console.log(CONFIG[period]); // ok console.log(CONFIG[period].scenes); // not ok });

It seems that I can't access object properties that are 3 layers-deep or more.

[mpetroff]

I can't help you if you don't provide proper information. The console.log statements are not printing ok to the console; they're printing the information necessary to debug this. You wrote that console.log(CONFIG[period]) is "ok" in the second case, but it's clearly not, since it doesn't include a scenes key.

This is also definitely an issue with your code and not an issue with Pannellum.

[felipe1234-dev]

I didn't mean they are literally printing "ok"/"not ok", I meant if they printed correctly the object in question or not.

It is possible to print an object's key with no problem, and that's what I did with CONFIG[period] in which period is a string. If period == "day" it would print CONFIG.day, and so on. I mean, I don't need to print a key inside it (CONFIG.day.scenes) in order for it to work, since console.log will print the whole thing including scenes key.

That's how Javascript works so I don't see your point here.

And, for more information, this is the object's structure:

let CONFIG = { day: { default: { // other keys }, scenes: { // Other keys }, }, night: { default: { // other keys }, scenes: { // Other keys } } }

Sorry for the lack of indentation.

When I execute console.log(CONFIG[period]) in which period == "day", it will print the whole object inside "day" key, and it did in all cases, meant by the "ok" word as in "hey, it worked!". But when I console log CONFIG[period].scenes in which period == "day" it works everywhere else except inside scenechange event, in other words, it's "ok"/working/printing the object correctly except in scenechange. It doesn't mean it's undefined since if so the object would be undefined everywhere, right?

[mpetroff]

I didn't mean they are literally printing "ok"/"not ok", I meant if they printed correctly the object in question or not.

I know that. My point is that your classification of the output as "ok" / "not ok" appears to be incorrect. Without the actual output, which you still haven't provided, I can't identify the issue. Copy and paste the output from the console.

If CONFIG[period] was an object with a scenes property, CONFIG[period].scenes would be defined. However, CONFIG[period].scenes is undefined, which means that CONFIG[period] does not have a scenes property.