Challenge 1 / 1

Suppose we have a Stimulus controller called hello-controller.js:

import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
  count = 0;

  connect() {
    this.count++;
    this.element.textContent = 'Lucky number '+this.count;
  }
}

And in your template, you have this:

<div>
    <div data-controller="hello"></div>
    <div data-controller="hello">Lucky Number</div>
</div>

What will the final page look like?

<div>
    <div data-controller="hello">Lucky number 1</div>
    <div data-controller="hello">Lucky NumberLucky number 1</div>
</div>

<div>
    <div data-controller="hello">Lucky number 1</div>
    <div data-controller="hello">Lucky number 2</div>
</div>

<div>
    <div data-controller="hello">Lucky number 1</div>
    <div data-controller="hello">Lucky number 1</div>
</div>

The HTML will not change at all:

<div>
    <div data-controller="hello"></div>
    <div data-controller="hello">Lucky Number</div>
</div>

That's because hello-controller.js is an invalid name. It should be hello_controller.js.

Rewatch the video