Code example 1 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 randomAnimal = null;
  
  setRandomAnimal() {
    const animal = animals[Math.floor(Math.random() * 3)];
    this.randomAnimal = animal;
  }
}

RandomAnimal.jsx

import React, { Fragment } from "react";

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

class RandomAnimal extends React.Component {
  constructor() {
    super();
    this.state = { animal: null };
    this.setRandomAnimal = this.setRandomAnimal.bind(this);
  }

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

  render() {
    let renderAnimal;

    if (this.state.animal) {
      renderAnimal = <h1>Hello, {this.state.animal}</h1>
    }

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

template.hbs

<button onclick={{action setRandomAnimal}}>Set Random Animal</button>
{{#if randomAnimal}}
  Hello, {{randomAnimal}}!
{{/if}}