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}>
    {children}
  </TD>
)

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

export const TD = styled.td`
  font-weight: ${(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}>
    {children}
  </TD>
)

Fin

onward-journeys module