Settings values

[alessandroame]

Is there a reason why this code:

settingsStorage.onchange = function(evt){ 
   console.log(evt);
}

produce this output with a TextInput setting?

{ 
  isTrusted: false, 
  key: 'APIKey', 
  newValue: '{"name":"abc"}', 
  oldValue: '{"name":"ab"}' 
} 

instead for a Toggle setting this?

{ 
  isTrusted: false,
  key: 'FollowMe',
  newValue: 'false',
  oldValue: 'true' 
}

Why in the values there is a json string for the TextInput setting?

My settings:

<Page>
      <Section title="Weather and forecast settings" 
        description={<Text> Obtain a free api key at <Link source="http://www.weatherbit.io">www.weatherbit.io</Link></Text>}>
        <Toggle
          settingsKey="FollowMe"
          label="Follow me"
        />

        <TextInput
          label="City"
          placeholder="Turin"
          action="Save"
          type="text"
          settingsKey="CityName"
          disabled={!(props.settings.FollowMe === "false")}
        /> 
        <TextInput
          label="API key"
          placeholder="[api key from weatherbit.io]"
          action="Save"
          type="text"
          settingsKey="APIKey"
        /> 
      </Section>

    </Page>

[JonFitbit · Accepted solution]

We are aware of the inconsistency, but we are currently unable to change it without affecting existing apps. Hopefully it will be resolved at some point though.

In the meantime, you could store the value manually, instead of using the automatic `settingsKey` property.

<TextInput
  value={{ name: this.props.settingsStorage.getItem('your-text-value') || 'default value' }}
  onChange={(value) => {
    this.props.settingsStorage.setItem('your-text-value', value.name);
  }}
/>