Computed Data
Storing your data in cells is great, but real apps need to use that data to compute things.
What We're Building
Adding Two Counters
In this step, we'll slightly modify the example we built in the previous step to create a second counter, and then show the total of both counters.
When using Starbeam reactivity, you use a regular JavaScript function to compute values from other reactive values.
tsx
export functionCounter () {returnComponent (() => {constcount1 =Cell (0);constcount2 =Cell (0);consttotal = () =>count1 .current +count2 .current ;return () => (<><pre ><span >count1</span >{" + "}<span >count2</span >{" = "}<span >total</span ></pre ><pre ><span >{count1 .current }</span >{" + "}<span >{count2 .current }</span >{" = "}<span >{total ()}</span ></pre ><h3 className ="count1">count1</h3 ><div className ="buttons"><button onClick ={() =>count1 .current ++}>increment</button ><button onClick ={() =>count1 .set (0)}>reset</button ></div ><h3 className ="count2">count2</h3 ><div className ="buttons"><button onClick ={() =>count2 .current ++}>increment</button ><button onClick ={() =>count2 .set (0)}>reset</button ></div ></>);});}
tsx
export functionCounter () {returnComponent (() => {constcount1 =Cell (0);constcount2 =Cell (0);consttotal = () =>count1 .current +count2 .current ;return () => (<><pre ><span >count1</span >{" + "}<span >count2</span >{" = "}<span >total</span ></pre ><pre ><span >{count1 .current }</span >{" + "}<span >{count2 .current }</span >{" = "}<span >{total ()}</span ></pre ><h3 className ="count1">count1</h3 ><div className ="buttons"><button onClick ={() =>count1 .current ++}>increment</button ><button onClick ={() =>count1 .set (0)}>reset</button ></div ><h3 className ="count2">count2</h3 ><div className ="buttons"><button onClick ={() =>count2 .current ++}>increment</button ><button onClick ={() =>count2 .set (0)}>reset</button ></div ></>);});}
tsx
export functionCounter ():JSX .Element {returnComponent (() => {constcount1 =Cell (0);constcount2 =Cell (0);consttotal = () =>count1 .current +count2 .current ;return () => (<><pre ><span >count1</span >{" + "}<span >count2</span >{" = "}<span >total</span ></pre ><pre ><span >{count1 .current }</span >{" + "}<span >{count2 .current }</span >{" = "}<span >{total ()}</span ></pre ><h3 className ="count1">count1</h3 ><div className ="buttons"><button onClick ={() =>count1 .current ++}>increment</button ><button onClick ={() =>count1 .set (0)}>reset</button ></div ><h3 className ="count2">count2</h3 ><div className ="buttons"><button onClick ={() =>count2 .current ++}>increment</button ><button onClick ={() =>count2 .set (0)}>reset</button ></div ></>);});}
tsx
export functionCounter ():JSX .Element {returnComponent (() => {constcount1 =Cell (0);constcount2 =Cell (0);consttotal = () =>count1 .current +count2 .current ;return () => (<><pre ><span >count1</span >{" + "}<span >count2</span >{" = "}<span >total</span ></pre ><pre ><span >{count1 .current }</span >{" + "}<span >{count2 .current }</span >{" = "}<span >{total ()}</span ></pre ><h3 className ="count1">count1</h3 ><div className ="buttons"><button onClick ={() =>count1 .current ++}>increment</button ><button onClick ={() =>count1 .set (0)}>reset</button ></div ><h3 className ="count2">count2</h3 ><div className ="buttons"><button onClick ={() =>count2 .current ++}>increment</button ><button onClick ={() =>count2 .set (0)}>reset</button ></div ></>);});}