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
tsximport { reactive } from "@starbeam/js";import { Component } from "@starbeam/react";import "./Counter.css"; export function Counter (): JSX .Element { return Component (() => { const counts = reactive .array ([0, 0]); const total = () => 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 > </> ); }; });}
tsximport { reactive } from "@starbeam/js";import { Component } from "@starbeam/react";import "./Counter.css"; export function Counter (): JSX .Element { return Component (() => { const counts = reactive .array ([0, 0]); const total = () => 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 > </> ); }; });}
tsximport { reactive } from "@starbeam/js";import { Component } from "@starbeam/react";import "./Counter.css"; export function Counter () { return Component (() => { const counts = reactive .array ([0, 0]); const total = () => 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 > </> ); }; });}
tsximport { reactive } from "@starbeam/js";import { Component } from "@starbeam/react";import "./Counter.css"; export function Counter () { return Component (() => { const counts = reactive .array ([0, 0]); const total = () => 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!