Debugging My Way Through a React Currency Converter: 3 Bugs, 3 Lessons

Ahmad Muhammad Tijjani — Wed, 05 Aug 2026 16:45:12 +0000

This is a submission for DEV's Summer Bug Smash: Clear the Lineup powered by Sentry.

Project Overview

While building a Currency Converter using React, I ran into a series of bugs during development — mostly around component structure, API data handling, and DOM element identity. Fixing them taught me a lot about how React state, custom hooks, and unique keys actually work under the hood.

Bug Fix or Performance Improvement

Bug 1: Duplicated Input Box
I accidentally duplicated the input box component instead of rendering it once in App.jsx. This caused two identical input fields to appear instead of one connected field. The fix was tracing back to where the component was being called and removing the duplicate render, keeping a single source of truth in App.jsx.

Bug 2: undefined Values from the API Response
My custom hook was fetching currency data, but the endpoint returned the data nested inside an object rather than a flat array. I initially tried accessing the currency keys directly in App.jsx the way I expected — which returned undefined. The issue was that I needed to access the first key of the response object inside the hook before passing usable data back out. Once I traced the actual shape of the response (using console.log), I fixed the hook to correctly parse and return the right key.

Bug 3: Misusing useId
I mistakenly used React's useId hook to assign identifiers to HTML elements the way I would use a regular id attribute, which caused unexpected behavior across elements. I learned useId is meant specifically for accessibility (linking labels/inputs), not as a general-purpose unique key or DOM identifier, and adjusted my usage accordingly.

Code

view the code on Github

My Improvements

This project turned into more of a debugging exercise than I expected, but each bug taught me something concrete:

Component structure matters — duplicating a component instead of reusing it from a single source (App.jsx) creates hard-to-trace UI bugs.
Always log the actual shape of API data — assumptions about response structure (flat vs. nested) will silently break your code with undefined values. console.log early and often.
Know what a hook is actually for — useId looks like it could double as a general unique identifier, but it's built specifically for accessibility, not for general-purpose keys or DOM ids.

None of these were huge, dramatic bugs — but fixing them forced me to slow down, read error behavior carefully, and actually understand why something wasn't working instead of guessing.

Currency Converter

Ahmad Muhammad Tijjani — Wed, 05 Aug 2026 16:18:27 +0000

Built a Currency Converter with React! 💱

The latest addition to my JavaScript Learning Journey — a simple currency converter built using React.

Not a huge project, but it helped me get more comfortable with:

Managing state with useState
Fetching real-time exchange rates from a currency API
Building a custom hook to handle the API logic and keep the component clean
Handling user input and controlled forms
Conditional rendering for results

It's a small step, but each project is building my confidence with React fundamentals one piece at a time.

Code is up on GitHub if you want to check it out — feedback always welcome! 🙌

webdev #react #programming #beginners