
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

page 37
ANTLRInputStream input = new ANTLRInputStream(is);
as of ANTLR 4 .8 should be:
CharStream stream = CharStreams.fromStream(i...
New

Hi Jamis,
I think there’s an issue with a test on chapter 6. I own the ebook, version P1.0 Feb. 2019.
This test doesn’t pass for me:
...
New

Title: Intuitive Python: docker run… denied error (page 2)
Attempted to run the docker command in both CLI and Powershell
PS C:\Users\r...
New

The book has the same “Problem space/Solution space” diagram on page 18 as is on page 17. The correct Problem/Solution space diagrams ar...
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 the book’s epub format available to read on Google Play Books?
New

The allprojects block listed on page 245 produces the following error when syncing gradle:
“org.gradle.api.GradleScriptException: A prob...
New

Hi, I’ve got a question about the implementation of PubSub when using a Phoenix.Socket.Transport behaviour rather than channels.
Before ...
New

Modern Front-End Development for Rails - application does not start after run bin/setup (page xviii)
After some hassle, I was able to finally run bin/setup, now I have started the rails server but I get this error message right when I vis...
New

I am using Android Studio Chipmunk | 2021.2.1 Patch 2
Build #AI-212.5712.43.2112.8815526, built on July 10, 2022
Runtime version: 11.0....
New
Other popular topics

Hello Devtalk World!
Please let us know a little about who you are and where you’re from :nerd_face:
New

I’ve been hearing quite a lot of comments relating to the sound of a keyboard, with one of the most desirable of these called ‘thock’, he...
New

On modern versions of macOS, you simply can’t power on your computer, launch a text editor or eBook reader, and write or read, without a ...
New

Hi folks,
I don’t know if I saw this here but, here’s a new programming language, called Roc
Reminds me a bit of Elm and thus Haskell. ...
New

We’ve talked about his book briefly here but it is quickly becoming obsolete - so he’s decided to create a series of 7 podcasts, the firs...
New

If you get Can't find emacs in your PATH when trying to install Doom Emacs on your Mac you… just… need to install Emacs first! :lol:
bre...
New

Author Spotlight
Erin Dees
@undees
Welcome to our new author spotlight! We had the pleasure of chatting with Erin Dees, co-author of ...
New

Inside our android webview app, we are trying to paste the copied content from another app eg (notes) using navigator.clipboard.readtext ...
New

zig/http.zig at 7cf2cbb33ef34c1d211135f56d30fe23b6cacd42 · ziglang/zig.
General-purpose programming language and toolchain for maintaini...
New

Curious what kind of results others are getting, I think actually prefer the 7B model to the 32B model, not only is it faster but the qua...
New
Latest in Modern Front-End Development for Rails, Second Edition
Categories:
Sub Categories:
Popular Portals
- /elixir
- /rust
- /wasm
- /ruby
- /erlang
- /phoenix
- /keyboards
- /rails
- /js
- /python
- /security
- /go
- /swift
- /vim
- /clojure
- /java
- /haskell
- /emacs
- /svelte
- /onivim
- /typescript
- /crystal
- /c-plus-plus
- /tailwind
- /kotlin
- /gleam
- /react
- /flutter
- /elm
- /ocaml
- /ash
- /vscode
- /opensuse
- /centos
- /php
- /deepseek
- /html
- /scala
- /zig
- /debian
- /nixos
- /lisp
- /agda
- /sublime-text
- /react-native
- /textmate
- /kubuntu
- /arch-linux
- /revery
- /ubuntu
- /django
- /manjaro
- /spring
- /diversity
- /lua
- /nodejs
- /julia
- /slackware
- /c
- /neovim