The Magic String That Haunted Me for Three Sprints

A love letter to configuration, and a restraining order against hardcoded values

Let me tell you about a character that lived rent-free in my codebase. It was small. It was innocent-looking. It was a single $. And it tried to ruin my week.

The scene of the crime
Somewhere deep in a component, a value was being displayed to users like this:

<span>Minimum: ${minimumValue}</span>

Looks fine, right? It was fine. For exactly as long as there was only one context in the world.

Then a second context showed up. And a third. Suddenly that friendly little $ was showing up in places where it had absolutely no business being — like a guest who wandered into the wrong wedding and started giving a toast.

The label was wrong too. It just said “Minimum” everywhere, blind to the context it was rendering in. One string, pretending every situation was the same situation.

Why hardcoding feels good (and lies to you)

Here’s the seductive thing about a magic value: it works immediately. You type the symbol, you type the number, it renders, you move on. Dopamine. Ship it.

Get Sifon Isaac’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

The bill comes later, and it comes with interest:

• The value is glued to presentation, so logic can’t reach it.
• The same literal gets copy-pasted into five files, and now there are five sources of truth that quietly disagree.
• Nobody can tell whether $ is “the currency” or “a dollar sign someone typed once in 2021.

The fix: make the thing describe itself

The move is almost boringly simple. Stop treating the symbol, the label, and the amount as three unrelated things scattered across your JSX. Treat them as one unit of data that knows what it is.

type DisplayContext = "A" | "B" | "C";

const config: Record<
  DisplayContext,
  { label: string; symbol: string; amount: string }
> = {
  A: { label: "Minimum A value", symbol: "$", amount: baseAmount },
  B: { label: "Minimum B value", symbol: "£", amount: baseAmount },
  C: { label: "Minimum C value", symbol: "€", amount: baseAmount },
};

And the render site becomes gloriously dumb:

<span>
  {config[context].label}: {config[context].symbol}
  {config[context].amount}
</span>

Notice what happened to amount. It’s not a literal “2” anymore. It points to baseAmount, which comes from config. That distinction matters.

The symbol and label are presentation; they can live near the component. But the number is a business fact, and business facts come from one authoritative place, never from your fingers at 11pm.

The rule I now live by

If a human will read it, or a rule depends on it, it is data — not a character you type next to other characters.

A quick gut-check before you hardcode anything:

• Will this ever differ by context? (Locale, tier, environment, user type.) If maybe-yes, it’s config.
• Does it appear in more than one place? If yes, it’s config yesterday.
• Is it a business fact? (A limit, a rate, a threshold.) Then it has an owner, and the owner is not your component

The payoff

The first version of this code took me 30 seconds to write and three sprints to stop apologising for.

The config version took about five extra minutes and has never once pinged me.

That’s the whole trade. Five extra minutes now, or a slow drip of “wait, why does it say that there?.

Be kind to the engineer who inherits your code. Statistically, it’s you.