Reactive Arrays
Reactive objects are nice, but in this case, we're really storing an array of values.
For this situation, it makes more sense to use reactive.array
. Just like reactive.object
, a reactive array has the same API as a normal JavaScript array.
Updates to the reactive array are reactive, which means that our component's render function will automatically update when the array changes.
What We're Building
The Code
tsx
import {reactive } from "@starbeam/js";import {Component } from "@starbeam/react";import "./Counter.css";export functionCounter () {returnComponent (() => {constcounts =reactive .array ([0, 0]);consttotal = () =>counts [0] +counts [1];return () => {const [count1 ,count2 ] =counts ;return (<><pre ><span >count1</span >{" + "}<span >count2</span >{" = "}<span >total</span ></pre ><pre ><span >{count1 }</span >{" + "}<span >{count2 }</span >{" = "}<span >{total ()}</span ></pre ><h3 className ="count1">count1</h3 ><div className ="buttons"><button onClick ={() =>counts [0]++}>increment</button ><button onClick ={() => {counts [0] = 0;}}>reset</button ></div ><h3 className ="count2">count2</h3 ><div className ="buttons"><button onClick ={() =>counts [1]++}>increment</button ><button onClick ={() => {counts [1] = 0;}}>reset</button ></div ></>);};});}
tsx
import {reactive } from "@starbeam/js";import {Component } from "@starbeam/react";import "./Counter.css";export functionCounter () {returnComponent (() => {constcounts =reactive .array ([0, 0]);consttotal = () =>counts [0] +counts [1];return () => {const [count1 ,count2 ] =counts ;return (<><pre ><span >count1</span >{" + "}<span >count2</span >{" = "}<span >total</span ></pre ><pre ><span >{count1 }</span >{" + "}<span >{count2 }</span >{" = "}<span >{total ()}</span ></pre ><h3 className ="count1">count1</h3 ><div className ="buttons"><button onClick ={() =>counts [0]++}>increment</button ><button onClick ={() => {counts [0] = 0;}}>reset</button ></div ><h3 className ="count2">count2</h3 ><div className ="buttons"><button onClick ={() =>counts [1]++}>increment</button ><button onClick ={() => {counts [1] = 0;}}>reset</button ></div ></>);};});}
tsx
import {reactive } from "@starbeam/js";import {Component } from "@starbeam/react";import "./Counter.css";export functionCounter ():JSX .Element {returnComponent (() => {constcounts =reactive .array ([0, 0]);consttotal = () =>counts [0] +counts [1];return () => {const [count1 ,count2 ] =counts ;return (<><pre ><span >count1</span >{" + "}<span >count2</span >{" = "}<span >total</span ></pre ><pre ><span >{count1 }</span >{" + "}<span >{count2 }</span >{" = "}<span >{total ()}</span ></pre ><h3 className ="count1">count1</h3 ><div className ="buttons"><button onClick ={() =>counts [0]++}>increment</button ><button onClick ={() => {counts [0] = 0;}}>reset</button ></div ><h3 className ="count2">count2</h3 ><div className ="buttons"><button onClick ={() =>counts [1]++}>increment</button ><button onClick ={() => {counts [1] = 0;}}>reset</button ></div ></>);};});}
tsx
import {reactive } from "@starbeam/js";import {Component } from "@starbeam/react";import "./Counter.css";export functionCounter ():JSX .Element {returnComponent (() => {constcounts =reactive .array ([0, 0]);consttotal = () =>counts [0] +counts [1];return () => {const [count1 ,count2 ] =counts ;return (<><pre ><span >count1</span >{" + "}<span >count2</span >{" = "}<span >total</span ></pre ><pre ><span >{count1 }</span >{" + "}<span >{count2 }</span >{" = "}<span >{total ()}</span ></pre ><h3 className ="count1">count1</h3 ><div className ="buttons"><button onClick ={() =>counts [0]++}>increment</button ><button onClick ={() => {counts [0] = 0;}}>reset</button ></div ><h3 className ="count2">count2</h3 ><div className ="buttons"><button onClick ={() =>counts [1]++}>increment</button ><button onClick ={() => {counts [1] = 0;}}>reset</button ></div ></>);};});}
A Bonus Lesson
Since we've put the counters into an array, it makes sense to extract the counter buttons into their own component, and to support an arbitrary number of counters.
If you're interested, check out the Reactive Arrays bonus lesson!