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

Open Sandbox

The Code

tsx
import { 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>
        </>
      );
    };
  });
}
tsx
import { 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>
        </>
      );
    };
  });
}

tsx
import { 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>
        </>
      );
    };
  });
}
tsx
import { 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!

Reactive Arrays ​

What We're Building ​

The Code ​

A Bonus Lesson ​

Reactive Arrays

What We're Building

The Code

A Bonus Lesson