
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
Popular Prag Prog topics

In Chapter 3, the source for index introduces Config on page 31, followed by more code including tests; Config isn’t introduced until pag...
New

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

The answer to 3rd Problem of Chapter 5 (Making Choices) of “Practical Programming, Third Edition” seems incorrect in the given answer ke...
New

The generated iex result below should list products instead of product for the metadata. (page 67)
iex> product = %Product{}
%Pento....
New

Dear Sophie.
I tried to do the “Authorization” exercise and have two questions:
When trying to plug in an email-service, I found the ...
New

When trying to generate the protobuf .go file, I receive this error:
Unknown flag: --go_opt
libprotoc 3.12.3
MacOS 11.3.1
Googling ...
New

@noelrappin
Running the webpack dev server, I receive the following warning:
ERROR in tsconfig.json
TS18003: No inputs were found in c...
New

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

@mfazio23
I’ve applied the changes from Chapter 5 of the book and everything builds correctly and runs. But, when I try to start a game,...
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

What chair do you have while working… and why?
Is there a ‘best’ type of chair or working position for developers?
New

Here’s our thread for the Keyboardio Atreus. It is a mechanical keyboard based on and a slight update of the original Atreus (Keyboardio ...
New

Rust is an exciting new programming language combining the power of C with memory safety, fearless concurrency, and productivity boosters...
New
New

Just done a fresh install of macOS Big Sur and on installing Erlang I am getting:
asdf install erlang 23.1.2
Configure failed.
checking ...
New

The V Programming Language
Simple language for building maintainable programs
V is already mentioned couple of times in the forum, but I...
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

A few weeks ago I started using Warp a terminal written in rust. Though in it’s current state of development there are a few caveats (tab...
New

The overengineered Solution to my Pigeon Problem.
TL;DR: I built a wifi-equipped water gun to shoot the pigeons on my balcony, controlle...
New

Large Language Models like ChatGPT say The Darnedest Things.
The Errors They MakeWhy We Need to Document Them, and What We Have Decided ...
New
Latest in PragProg
Latest (all)
Categories:
Popular Portals
- /elixir
- /rust
- /wasm
- /ruby
- /erlang
- /phoenix
- /keyboards
- /js
- /rails
- /python
- /security
- /go
- /swift
- /vim
- /clojure
- /java
- /haskell
- /emacs
- /svelte
- /onivim
- /typescript
- /crystal
- /c-plus-plus
- /tailwind
- /kotlin
- /gleam
- /react
- /flutter
- /elm
- /ocaml
- /vscode
- /opensuse
- /centos
- /ash
- /php
- /deepseek
- /scala
- /zig
- /html
- /debian
- /nixos
- /lisp
- /agda
- /textmate
- /sublime-text
- /react-native
- /kubuntu
- /arch-linux
- /ubuntu
- /revery
- /manjaro
- /spring
- /django
- /diversity
- /lua
- /nodejs
- /slackware
- /julia
- /c
- /neovim