Settings API returning incorrectly formatted JSON

[Will_Jay_]

Using the basic template code for Settings. Wanting simple integration of changeable text. Despite many small changes still returning [object Object] or error message. Is it the template that needs changing, or is a problem with my code?. Thanks.

app/index.js

import document from "document";
import * as messaging from "messaging";

let One = document.getElementById("One");
let OneL = document.getElementById("P1Subj");

// Message is received
messaging.peerSocket.onmessage = evt => {
  console.log(`App received: ${JSON.stringify(evt)}`);
  if (evt.data.key === "color" && evt.data.newValue) {
    let color = JSON.parse(evt.data.newValue);
    console.log(`Setting background color: ${color}`);
    One.style.fill = color;
  } 
  if (evt.data.key === "P1Lesson" && evt.data.newValue) {
    let P1LE = JSON.parse(evt.data.newValue);
    console.log(`Setting text: ${P1LE}`);
    console.log(evt);
    OneL.text = P1LE;
  }
};

// Message socket opens
messaging.peerSocket.onopen = () => {
  console.log("App Socket Open");
};

// Message socket closes
messaging.peerSocket.onclose = () => {
  console.log("App Socket Closed");
};

companion/index.js

import * as messaging from "messaging";
import { settingsStorage } from "settings";

// Message socket opens
messaging.peerSocket.onopen = () => {
  console.log("Companion Socket Open");
  restoreSettings();
};

// Message socket closes
messaging.peerSocket.onclose = () => {
  console.log("Companion Socket Closed");
};

// A user changes settings
settingsStorage.onchange = evt => {
  let data = {
    key: evt.key,
    newValue: evt.newValue
  };
  sendVal(data);
};

// Restore any previously saved settings and send to the device
function restoreSettings() {
  for (let index = 0; index < settingsStorage.length; index++) {
    let key = settingsStorage.key(index);
    if (key) {
      let data = {
        key: key,
        newValue: settingsStorage.getItem(key)
      };
      sendVal(data);
    }
  }
}

// Send data to device using Messaging API
function sendVal(data) {
  if (messaging.peerSocket.readyState === messaging.peerSocket.OPEN) {
    messaging.peerSocket.send(data);
  }
}

settings/index.jsx

function mySettings(props) {
  return (
    <Page>
      <Section
        title={<Text bold align="center"> TimeTable</Text>}>
        <ColorSelect
          settingsKey="color"
          colors={[
            {color: "tomato"},
            {color: "sandybrown"},
            {color: "#FFD700"},
            {color: "#ADFF2F"},
            {color: "deepskyblue"},
            {color: "plum"}
          ]}
        />
        <TextInput
          label="PO Lesson"
          settingsKey="POLesson"
          name="Name"
        />
        <TextInput
          label="PO Location"
          settingsKey="POLocation"
        />
      </Section>
    </Page>
  );
}

registerSettingsPage(mySettings);