Skip to content
On this page

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 on CodeSandboxOpen 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!

Released under the MIT license