Code example 2 in "Unopinionated comparison of Glimmer and React"

component.ts

import Component, { tracked } from '@glimmer/component';

const animals = ["Cat", "Dog", "Rabbit"];

export default class extends Component {
  @tracked randomAnimals = [];

  setRandomAnimal() {
    const animal = animals[Math.floor(Math.random() * 3)];

    this.randomAnimals = this.randomAnimals.concat(animal);
  }
}

RandomAnimal.jsx

import React, { Fragment } from "react";

const animals = ["Cat", "Dog", "Rabbit"];

class RandomAnimal extends React.Component {
  constructor() {
    super();
    this.state = { animals: [] };
    this.setRandomAnimal = this.setRandomAnimal.bind(this);
  }

  setRandomAnimal() {
    const animal = animals[Math.floor(Math.random() * 3)];

    this.setState((prevState) => (
      { animals: prevState.animals.concat(animal) }
    ));
  }

  render() {
    const renderedAnimals = this.state.animals.map((animal, index) =>
      <li key={index}>{animal}</li>
    );

    return (
      <Fragment>
        <button onClick={this.setRandomAnimal}>Set Random Animal</button>
        <ul>{ renderedAnimals }</ul>
      </Fragment>
    );
  }
}

template.hbs

<button onclick={{action setRandomAnimal}}>Set Random Animal</button>
<ul>
  {{#each randomAnimals key="@index" as |animal| }}
    <li>{{animal}}</li>
  {{/each}}
</ul>