Error in settings page

[Liljeberg]

 I have a color selector in the settings page. It only has a single color set by a settingsStorage, like so:

<ColorSelect
          settingsKey="current_color"
          colors={ JSON.parse(props.settingsStorage.getItem("current_color"))}
/> 

This results in a page-wide single button of the color I have set from the companion. 

In the companion I have this to produce the necessary : 

let currcol = JSON.stringify( [{color: new String('#')+R_hex+G_hex+B_hex}] );
console.log(currcol);
settingsStorage.setItem("current_color", currcol);

The output of the console.log above results in, for example:

[{"color":"#df8080"}]

I can successfully dynamically change the color of this single color selector "button". However, when I tap the color selector "button" with said color, the settings page goes blank and I get this error message in the console:

[20:34:05]{ column = 21604; line = 4; sourceURL = "https://app-settings.fitbitdevelopercontent.com/static/js/companion-settings.d54c7344.js"; }

[20:34:05]TypeError: e.map is not a function. (In 'e.map(function(e){var t=e.color,n=e.value,r=void 0===n?t:n;return{color:L(t),value:r}})', 'e.map' is undefined)

I can circumvent this by having another <button> that submits the color value of the color selector, but I don't want the users to crash the page if they accidentally tap the color selector. 

I don't know if there's a bug in the file linked in the error message (have fun reading it...) or if I'm formatting the json array incorrectly, but since it sets the color successfully it would seem the former.

Can anyone help?

[JonFitbit · Accepted solution]

I'm told it's because you are overriding the settingsKey logic.

The colors prop should be separate from the settingsKey. e.g. not the same data.

Think of colors as the options list, and settingsKey data being the selected option.

I hope that helps.

[Liljeberg]

Thank you very much!