Forem: Myles Ngicu

React Ref Problem: Ref Pointing to Multiple DOM Elements with CSS Media Query Hiding

Myles Ngicu — Tue, 09 Sep 2025 14:25:20 +0000

Overview
In React, a single ref object can only hold a reference to one DOM element at a time via its .current property. Assigning the same ref to multiple elements causes the ref to point to the last rendered element. This can cause issues in event handling logic when multiple elements are rendered but some are hidden using CSS media queries.

Problem Description
I had a bug where the same React ref (locationRef) was assigned to two components that render differently for desktop and mobile views. This resulted in clicks inside the desktop view not working while clicks in the mobile view worked:

useEffect(() => {
  function handleClickOutside(event) {
    if (
      locationRef.current &&
      !locationRef.current.contains(event.target)
    ) {
      setIsLocationOpen(false);
    }
  }

  document.addEventListener("mousedown", handleClickOutside);
  return () => {
    document.removeEventListener("mousedown", handleClickOutside);
  };
}, [locationRef]);

// JSX structure
<DesktopOnly>
  <LocationContainer ref={locationRef}>
    {/* Desktop location toggle and menu */}
  </LocationContainer>
</DesktopOnly>

<MobileOnly>
  <LocationContainer ref={locationRef}>
    {/* Mobile location toggle and menu */}
  </LocationContainer>
</MobileOnly>

In this setup:

The same locationRef is used on both desktop and mobile .

The mobile container is hidden via CSS media queries, e.g., display: none when on desktop screen sizes.

What Happens Internally?
Both desktop and mobile are present in the DOM; only one is visually hidden.

React assigns locationRef.current to the last rendered , typically the mobile one.

Even though the mobile container is hidden by CSS, locationRef.current points to its hidden DOM element.

The click outside handler checks events against the hidden element, causing flawed logic:

Clicks inside the visible desktop container may appear outside the referenced element.

Resulting in setIsLocationOpen(false) triggering unexpectedly.

Example Situation
If locationRef.current points to the mobile container which is hidden (but still in DOM due to CSS):

if (locationRef.current && !locationRef.current.contains(event.target)) {
  // This may trigger even if the click is inside the visible desktop container,
  // because locationRef.current points to the hidden mobile container node.
  setIsLocationOpen(false);
}

Recommended Solutions
1. Use Separate Refs for Desktop and Mobile

const desktopLocationRef = useRef(null);
const mobileLocationRef = useRef(null);

useEffect(() => {
  function handleClickOutside(event) {
    const activeRef = window.innerWidth >= 768 ? desktopLocationRef : mobileLocationRef;

    if (
      activeRef.current &&
      !activeRef.current.contains(event.target)
    ) {
      setIsLocationOpen(false);
    }
  }

  document.addEventListener("mousedown", handleClickOutside);
  return () => {
    document.removeEventListener("mousedown", handleClickOutside);
  };
}, []);

<DesktopOnly>
  <LocationContainer ref={desktopLocationRef}>{/* desktop content */}</LocationContainer>
</DesktopOnly>

<MobileOnly>
  <LocationContainer ref={mobileLocationRef}>{/* mobile content */}</LocationContainer>
</MobileOnly>

2. Conditionally Render Only One DOM Tree
Instead of hiding via CSS, conditionally render only the applicable container per screen:

return (
  <>
    {isDesktop ? (
      <LocationContainer ref={locationRefDesktop}>{/* desktop */}</LocationContainer>
    ) : (
      <LocationContainer ref={locationRefMobile}>{/* mobile */}</LocationContainer>
    )}
  </>
);

This prevents multiple refs assigned to DOM elements simultaneously.

Vibe coding clarity with Kiro specs

Myles Ngicu — Tue, 22 Jul 2025 14:50:01 +0000

When AWS made the Kiro announcement, I was more than excited to try it out. As I write this blog, it is still in it's preview stage. I was able to download it before its access was limited for fine-tuning. I would love to share my experience so far.

We are in the awesome age(some would think scary😅), of code-native AI agents. Think of it as a coding partner that is integrated to your coding environment such as your terminal or IDE. It has a codebase-wide understanding of your project which means it understands your project structure and gets the context across multiple files.

Kiro is one of these cool tools. When I downloaded it, I signed in using my AWS Builder ID. There are other sign-in options including Google and Github. I loved this option that allowed me to import my configs from VScode

When you finish setting up and open a project folder, you get to choose what mode you want to build in.

With the Vibe mode you chat with Kiro and tell it what you need it to do. It gets right into the implementation. Most code-native AI agents do something similar. This is an example of a prompt I wrote to test the 'vibe mode'.

For me, the real 'magic' happens in the Spec mode. Kiro specs introduces clarity to vibe coding! It starts by generating user stories, just as you would do in the requirement gathering stage of s/w development. You can tell it to edit and update the requirements until you are satisfied. When it's all good you proceed to design.

Kiro designs the system architecture for you! From architecture diagrams to Typescript interfaces, it knows what is needed based on the requirements. Once again, you can tell Kiro to update it until it fits your preference, then you proceed to generating the task list.

Now this is my favourite part. Unlike your usual vibe coding sessions, this one is well guided. Kiro generates an implementation plan which is a sequence of tasks to execute. The tasks are modular and include test generation. Just click 'Start task' and let Kiro execute.

Now you see where the clarity in vibe coding comes in, right? As you vibe code, Kiro allows you to be very organised. You know exactly what tasks are done and which ones are remaining. One can almost visualise their project, end-to-end.

I'm excited to try out more of their features such as the Agent hooks which allows you to automate repetitive tasks. I highly recommend that you join the waitlist to get this AWSome experience with Kiro!

Building a game using Amazon Q CLI

Myles Ngicu — Mon, 16 Jun 2025 10:08:46 +0000

Creating a Space Invaders Game with Amazon Q CLI

If you think Amazon Q is cool, make a game with it on the CLI and experience the AWSomeness! That's exactly what I did and I marvelled at how easy it is.
Amazon Q as a generative AI for developers. On the CLI, it doesn't have native support for Windows. I hadd a little trouble with that but I found out that I can install it using WSL. After that, just type 'q' and voila, you're in!😎

I wanted to create the retro game called "Space Invaders" where a space ship shoots down alien invaders. All I needed to do was give Amazon Q this detailed prompt:

Create a complete "Space Invaders"-style game using vanilla HTML, CSS, and JavaScript. The game should have a player ship at the bottom that moves left and right with arrow keys and shoots bullets upward with spacebar. Rows of aliens move side to side at the top and shoot bullets downward toward the player. Players score points by destroying aliens, the score should be displayed and updated in real time, and the game should show "GAME OVER" if an alien bullet hits the ship. Provide a directory structure with index.html, style.css, and script.js files, well-commented and functional by opening index.html in a modern browser.

It requested for permission to run a shell command and I did so by typing 't'(always allow such actions for this session).

Amazon Q's Response

Amazon Q created a folder with the following files:

space-invaders/
├── index.html    # Main HTML structure
├── style.css     # Game styling
└── script.js     # Game logic and functionality

The response included instructions on how to run the game.

Playing the game

I navigated to the folder containing the game files and ran the index.html on my browser

As requested in the prompt, the game includes:

Player ship that moves left and right with arrow keys
Shooting functionality with the spacebar
Rows of aliens that move side to side and gradually descend
Aliens that randomly shoot bullets downward
Score tracking that updates in real-time
"GAME OVER" display when hit by an alien bullet
Different coloured aliens worth different point values

Well, I haven't won a game yet(the aliens keep getting me). I enjoyed how easy it is to create the Space Invaders game using Amazon Q CLI in a single prompt-response interaction. It shows just one of the many capabilities of Amazon Q on the CLI.
I hope y'all create cool games and join the challenge which ends on June 30th 2025.

Debut!

Myles Ngicu — Mon, 16 Jun 2025 06:37:08 +0000

Hi there! This is my first day here(I feel like an intern😅). I'll use this space mostly to blog about cloud related projects I do on AWS. See you around!