Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine
TRACK

Symfony 6 >

COURSE

Harmonious Development with Symfony 6 >

CHAPTER

Stimulus: Sensible, Beautiful JavaScript

Next Chapter

Challenge #1 of 1

Q: 

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?

a) 
<div>
    <div data-controller="hello">Lucky number 1</div>
    <div data-controller="hello">Lucky number 1</div>
</div>
b) 
<div>
    <div data-controller="hello">Lucky number 1</div>
    <div data-controller="hello">Lucky NumberLucky number 1</div>
</div>
c)

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.

d) 
<div>
    <div data-controller="hello">Lucky number 1</div>
    <div data-controller="hello">Lucky number 2</div>
</div>
Rewatch Video
userVoice