How to get the value from a text input in index.jsx?

[Tnoff]

I am trying to use text inputs in my index.jsx, and they show up and work, but I cannot figure out how to put the value that is entered into a variable. Here is my code:

function mySettings(props) {
return (
<Page>
<Text>Add up to 10 Custom Contacts!</Text>
<Section

title={<Text bold align="center">Contacts:</Text>}>
<TextInput

label="Contact 1"
settingsKey="text"

type="text"
onChange = {let text = }

/>

</Section>

</Page>
);
}

registerSettingsPage(mySettings);

Thanks in advance!

[T_mex]

I this in the settings or main app?

[Tnoff]

Settings

[T_mex]

Here is a quick example I made:

Settings:

function Settings(props) {
  return (
    <Page>
       <TextInput
          label="example"
          settingsKey="text"
        />
    </Page>
  );
}

registerSettingsPage(Settings);

Companion:

import { settingsStorage } from "settings";
...
settingsStorage.onchange = function(evt) {
  console.log(JSON.parse(evt.newValue).name);
}
...

[Tnoff]

Thanks! I got it working, but I have another question. I have 10 text inputs in my settings, and the code you gave calls whenever any of them are changed. How can I save each different text input's content to separate variables? 

[T_mex · Accepted solution]

I would recommend saving the values on the app/watch end. Forwarding the information from the companion to the watch end and saving it there.

Make sure each Key is unique. Also you might want to read about local file systems for saving/loading the settings. 
https://dev.fitbit.com/build/guides/file-system/  

Some more example code for Companion -> App/Watch Face

Companion:

import { settingsStorage } from "settings";
import * as messaging from "messaging";
...
settingsStorage.onchange = function(evt) {
  sendValue(evt.key, JSON.parse(evt.newValue).name);
}
function sendValue(key, val) {
  var data = ({key: key,value: val});
  messaging.peerSocket.send(data);
}

App/Watch Face:

import * as messaging from "messaging";
...
messaging.peerSocket.onmessage = function(evt) {
 console.log(evt.data.key);
 console.log(evt.data.value);
}

[Tnoff]

The code you gave me:

console.log(evt.data.value);

Always returns undefined. (This is in my app)

It logs the keys fine, but each of their values are undefined. 

[T_mex]

Sorry about that, I forgot to update the companion side. I just added a part the parse the Json like the "printline" before.

This should work.

Companion:

import { settingsStorage } from "settings";
import * as messaging from "messaging";
...
settingsStorage.onchange = function(evt) {
  sendValue(evt.key, JSON.parse(evt.newValue).name);
}
function sendValue(key, val) {
  var data = ({key: key,value: val});
  messaging.peerSocket.send(data);
}