Accessing the settings within settings/index.jsx

[vardhanapoorv]

I have 3 settings in my index.jsx out of which the 3rd setting options that I want to show users depends on the selection of the first two settings what the user selects. I'm not able to find a way to access the settings in index.jsx file so that I can make the options change dynamically depending on what users selected for the first two settings. Let me know what should be done. 

[Gondwana]

You can probably do this using React conditionals. Have a look at the Toggle example here. Obviously your case will be more complicated.

[vardhanapoorv]

Thanks @Gondwana I already tried that but I'm not clear how to exactly use it in index.jsx.
I get this error on installing - 
Settings: ReferenceError: settings is not defined
[12:53:56 PM] Settings: Uncaught ReferenceError: settings is not defined

which is right since settings variable is not defined in index.jsx. Where should I add it ?, I think I'm doing it wrong.
I'm running this on simulator on Mac OS.
Let me know what should be done. Thanks.

[Gondwana]

I think the Fitbit documentation is occasionally wrong. Try props.settingsStorage.getItem(...)

You can also try props.settings, but I've found it to be less reliable (because I don't know what I'm doing).

[vardhanapoorv]

@Gondwana I tried the props.settingsStorage way already and that prints empty. Just now tried props.settings that also it returning empty. 
{console.log("dsad", JSON.parse(props.settingsStorage.getItem("line")))}
{console.log("dsaddee", props.settings)}

Settings: dsad
[1:27:06 PM] Settings: dsaddee

App type as in package.json
"appType": "clockface"

I'm able to access the settings perfectly fine in the companion through settingsStorage but not here. It's not working. What am I missing?

[Gondwana]

I'd need to see more context; eg, the whole of the .jsx. I assume you've tried changing the value of the setting element with id "line", and that the console.log statements are somewhere that will be executed when that value changes.

[vardhanapoorv]

@Gondwana yeah I tried changing the value and the console.log statements get printed again but again with empty result.
https://gist.github.com/vardhanapoorv/b692dc57eafe459ea1445f625a6e9ce9
Here is the index.jsx file. Let me know the issue. 

[Gondwana]

{console.log(`dsad ${JSON.parse(props.settingsStorage.getItem("line")).selected[0]}`)}

[vardhanapoorv]

@Gondwana thanks a lot for the help! Was this provided anywhere in the docs ? just want to know the place I didn't look so that its beneficial for next time. 
Couple of questions I had -  can I get the actual value of the selected thing or just the index, I can handle index also but just asking. Other question is there any way I can send something to settings/index.jsx from companion which can be accessed in index.jsx.
For example -  depending on the first two settings I want make a call using a npm package from companion can I send that result to settings/index.jsx so that it is accessible here and the options I provide for settings 3 is that result. Let me know.  

[Gondwana]

Yes and yes.

To find out what you can extract from a setting, try printing it BEFORE you JSON.parse the string. Then you'll be able to see how to get the bit you want from the object after you parse it.

To pass something to the companion, set a setting for it in the .jsx. The setting key doesn't have to correspond to any element in your .jsx. The companion will receive an event when the setting value changes, just as though you'd changed a setting value for an element.

[vardhanapoorv]

@Gondwana thanks!
Oh actually I meant ask how can send something from the companion to settings. But I can work with what you said creating an extra setting for that so that 3rd setting gets that as option. 

[Gondwana]

Companion to settings can be done using same process in reverse: set a setting in companion index.js, and include code in your settings index.jsx that depends on it.

[vardhanapoorv]

@Gondwana thanks lot for your help, already did that!