Skip to content

Apologies for the appearance of the site. I'm designing in public!

Some code on a laptop screen

Naming your boolean variables better

Published on Tuesday, 31 January 2023.
At 149 words, this article should take about 1 minute to read.

I picked up this funky bug last week…

On hovering of the table cell, the word "true" appears.

On inspection, the offending code looked like this;

const Cell = ({ children, className, title }) => (
<TD className={className} title={title}>

The intended behaviour of the title prop is to conditionally update the styles —

export const TD =`
${(props) => (props.title && 'bold'`)};

Because title is an actual HTML attribute, you shouldn't be using it as the Boolean variable name.

The attribute is added to the td causing the word "true" or "false" to be visible on hover of the element.

Instead consider (for all Boolean variable names, not just this one) using the prefix "is" such as isTitle or isHref.

This will reduce conflicts and make your code more readable.

const Cell = ({ children, className, isTitle }) => (
<TD className={className} isTitle={isTitle}>



In almost all cases, the comments section is a vile cesspool of Reply Guys, racists, and bots.

I don't want to have to deal with that kind of hell so I don't have a comments section.

If you want to continue the conversation, you can always hit me up on Mastodon (which is not a vile cesspool of Reply Guys, racists, and bots).

onward-journeys module