psantos

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

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

Where Next?

Popular Pragmatic Bookshelf topics Top

abtin
page 20: … protoc command… I had to additionally run the following go get commands in order to be able to compile protobuf code using go...
New
belgoros
Following the steps described in Chapter 6 of the book, I’m stuck with running the migration as described on page 84: bundle exec sequel...
New
brianokken
Many tasks_proj/tests directories exist in chapters 2, 3, 5 that have tests that use the custom markers smoke and get, which are not decl...
New
JohnS
I can’t setup the Rails source code. This happens in a working directory containing multiple (postgres) Rails apps. With: ruby-3.0.0 s...
New
herminiotorres
Hi! I know not the intentions behind this narrative when called, on page XI: mount() |> handle_event() |> render() but the correc...
New
cro
I am working on the “Your Turn” for chapter one and building out the restart button talked about on page 27. It recommends looking into ...
New
patoncrispy
I’m new to Rust and am using this book to learn more as well as to feed my interest in game dev. I’ve just finished the flappy dragon exa...
New
tkhobbes
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
Keton
When running the program in chapter 8, “Implementing Combat”, the printout Health before attack was never printed so I assumed something ...
New
gorkaio
root_layout: {PentoWeb.LayoutView, :root}, This results in the following following error: no “root” html template defined for PentoWeb...
New

Other popular topics Top

AstonJ
If it’s a mechanical keyboard, which switches do you have? Would you recommend it? Why? What will your next keyboard be? Pics always w...
New
siddhant3030
I’m thinking of buying a monitor that I can rotate to use as a vertical monitor? Also, I want to know if someone is using it for program...
New
PragmaticBookshelf
Design and develop sophisticated 2D games that are as much fun to make as they are to play. From particle effects and pathfinding to soci...
New
AstonJ
Curious to know which languages and frameworks you’re all thinking about learning next :upside_down_face: Perhaps if there’s enough peop...
New
AstonJ
I have seen the keycaps I want - they are due for a group-buy this week but won’t be delivered until October next year!!! :rofl: The Ser...
New
PragmaticBookshelf
Tailwind CSS is an exciting new CSS framework that allows you to design your site by composing simple utility classes to create complex e...
New
PragmaticBookshelf
Create efficient, elegant software tests in pytest, Python's most powerful testing framework. Brian Okken @brianokken Edited by Kat...
New
Maartz
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
First poster: AstonJ
Jan | Rethink the Computer. Jan turns your computer into an AI machine by running LLMs locally on your computer. It’s a privacy-focus, l...
New
PragmaticBookshelf
Explore the power of Ash Framework by modeling and building the domain for a real-world web application. Rebecca Le @sevenseacat and ...
New

Sub Categories: