Button onClick in Settings

[jomis003]

I am attempting to use the sample code given for the button settings in the documentation.

In Setttings - index.jsx I have the import statement for settingsStrorage and the code for the button:

<Button
          list
          label="Clear All Settings"
          onClick={() => this.props.settingsStorage.clear()}
        />

However - when I execute I get in the consolelog TypeError: undefined is not an object (evaluating '_this.props')

I am able to use settingsStorage.clear() in the companion index.js.

I am sure I am missing something obvious but it is Monday...

[JonFitbit]

You shouldn't need to import anything, but props needs to be in the function signature.

Try something like this:

function mySettings(props) {
  return (
    <Page>
      <Section
        title={<Text bold align="center">Settings</Text>}>

        <Button
          list
          label="Clear All Settings"
          onClick={() => props.settingsStorage.clear()}
        />
      </Section>
    </Page>
  );
}

registerSettingsPage(mySettings);

  [EDITED] 

[jomis003]

I reduced my code to what you have and am still seeing the same issue.

[JonFitbit]

It looks like you're mixing the Settings API (jsx) with the Companion API (js).

Remove the first 2 import lines, and confirm that this file is settings/index.jsx

[jomis003]

I have confirmed that I am working within the index.jsx file. Taking out the two import lines did not help. I am still getting the same TypeError:

I also started a new settings project and put a simple textInput in with the above code and got the same error in there as well.

[Gondwana]

In settings/index.jsx, this works for me:

        <Button
          label="Create/Update"
          onClick={() => {
            props.settingsStorage.setItem('createAccount', 'true');
          }}
        />

No 'import' statements or 'this' are required (or allowed).