Hello World v3

In this demo, we set up a listener for data in the Store object and then change the Cell to see the display update. We're making changes to the Hello World v2 demo.

Instead of populating the Store object with a static Cell value, we use the current time:

-store.setCell('t1', 'r1', 'c1', 'Hello World');
+const setTime = () => {
+  store.setCell('t1', 'r1', 'c1', new Date().toLocaleTimeString());
+};
+setTime();

We also create a function that updates the DOM with the value of the Cell, and run it once to initialize the display:

-document.body.innerHTML = store.getCell('t1', 'r1', 'c1');
+const update = () => {
+  document.body.innerHTML = store.getCell('t1', 'r1', 'c1');
+};
+update();

We then add that update function as a CellListener so that every change to the Cell causes it to be called:

store.addCellListener('t1', 'r1', 'c1', update);

To stimulate the CellListener, we update the time every second:

setInterval(setTime, 1000);

Next, we will use React to render data in the Store object and then change a Cell to see the display update. Please continue to the Hello World v4 demo.