
psantos
Modern Front-End Development for Rails, Second Edition: Chapter 3, Stimulus - elementToHideTarget is undefined (p 52)
On page 52, example code chapter_03/04/app/javascript/controllers/favorite_toggle_controller.ts
, which is:
import { Controller } from "@hotwired/stimulus";
export default class FavoriteToggleController extends Controller {
static targets = ["elementToHide"];
elementToHideTarget: HTMLElement;
toggle(): void {
this.elementToHideTarget.classList.toggle("hidden");
}
}
The way it is, will not work, since elementToHideTarget will always be undefined. To work I needed to make the following change:
import { Controller } from "@hotwired/stimulus";
export default class FavoriteToggleController extends Controller {
static targets = ["elementToHide"];
declare readonly elementToHideTarget: HTMLElement;
toggle(): void {
this.elementToHideTarget.classList.toggle("hidden");
}
}
I did the same change on page 55:
static values = { visible: Boolean };
declare visibleValue: boolean;
Note that this time I did not declare it as readonly
, since I am changing its value on flipState()
function.
Versions:
Ruby 3.1.2
Rails: 7.0.4
Gem stimulus-rails: 1.1.0
@hotwired/stimulus: 3.1.0
First Post!

noelrappin
Author of Modern Front-End Development for Rails
What error do you get, and are you working from the supplied code or building it up yourself?
The elementToHideTarget should be set by Stimulus, it shouldn’t be undefined…
Thanks,
Noel
Popular Pragmatic Bookshelf topics

Hi everyone!
There is an error on the page 71 in the book “Programming machine learning from coding to depp learning” P. Perrotta. You c...
New

Hello! Thanks for the great book.
I was attempting the Trie (chap 17) exercises and for number 4 the solution provided for the autocorre...
New

I’m running Android Studio “Arctic Fox” 2020.3.1 Patch 2, and I’m embarrassed to admit that I only made it to page 8 before running into ...
New

This is as much a suggestion as a question, as a note for others.
Locally the SGP30 wasn’t available, so I ordered a SGP40. On page 53, ...
New

“The ProductLive.Index template calls a helper function, live_component/3, that in turn calls on the modal component. ”
Excerpt From: Br...
New

When I run the coverage example to report on missing lines, I get:
pytest --cov=cards --report=term-missing ch7
ERROR: usage: pytest [op...
New

When trying to run tox in parallel as explained on page 151, I got the following error:
tox: error: argument -p/–parallel: expected one...
New

Is there any place where we can discuss the solutions to some of the exercises? I can figure most of them out, but am having trouble with...
New

Hello @herbert ! Trying to get the very first “Hello, Bracket Terminal!" example to run (p. 53). I develop on an Amazon EC2 instance runn...
New

Hello faithful readers! If you have tried to follow along in the book, you are asked to start up the dev environment via dx/build and ar...
New
Other popular topics

I am thinking in building or buy a desktop computer for programing, both professionally and on my free time, and my choice of OS is Linux...
New
New
New

Crystal recently reached version 1. I had been following it for awhile but never got to really learn it. Most languages I picked up out o...
New

Hello everyone! This thread is to tell you about what authors from The Pragmatic Bookshelf are writing on Medium.
New

Rails 7 completely redefines what it means to produce fantastic user experiences and provides a way to achieve all the benefits of single...
New

I am trying to crate a game for the Nintendo switch, I wanted to use Java as I am comfortable with that programming language. Can you use...
New

Author Spotlight
Rebecca Skinner
@RebeccaSkinner
Welcome to our latest author spotlight, where we sit down with Rebecca Skinner, auth...
New

There appears to have been an update that has changed the terminology for what has previously been known as the Taskbar Overflow - this h...
New

I’m able to do the “artistic” part of game-development; character designing/modeling, music, environment modeling, etc.
However, I don’t...
New
Latest in Modern Front-End Development for Rails, Second Edition
Categories:
Sub Categories:
Popular Portals
- /elixir
- /rust
- /ruby
- /wasm
- /erlang
- /phoenix
- /keyboards
- /rails
- /python
- /js
- /security
- /go
- /swift
- /vim
- /clojure
- /haskell
- /emacs
- /java
- /svelte
- /onivim
- /typescript
- /kotlin
- /c-plus-plus
- /crystal
- /tailwind
- /react
- /gleam
- /ocaml
- /flutter
- /elm
- /vscode
- /ash
- /opensuse
- /html
- /centos
- /php
- /deepseek
- /zig
- /scala
- /sublime-text
- /lisp
- /textmate
- /react-native
- /nixos
- /debian
- /agda
- /kubuntu
- /arch-linux
- /django
- /ubuntu
- /revery
- /deno
- /manjaro
- /spring
- /nodejs
- /diversity
- /lua
- /julia
- /slackware
- /c