EmptyValueTag

EmptyValueTag

Renders a value or a fallback dash placeholder for empty or missing values.

Rationale

Tables, detail views, and summary cards often display fields that may be empty. Rather than rendering a blank space (which users may confuse with a rendering glitch or missing data), this component consistently shows a dash (-). It also normalises the many flavours of "empty" in JavaScript — null, undefined, empty string, and whitespace-only string — into the same visual output.

Props

Name	Type	Required	Description
value	string | number | null | undefined	No	Value to display. Null, undefined, or empty strings render a dash.

Usage

import EmptyValueTag from '@/components/core/Tags/EmptyValueTag';

<EmptyValueTag value="Permit 123" />;
<EmptyValueTag value={42} />;
<EmptyValueTag value={null} />;
<EmptyValueTag value="" />;

Behavior

The component applies a strict emptiness check before rendering:

• If value is not null, not undefined, not '', and not a whitespace-only string → renders <span>{value}</span>.
• Otherwise → renders <span data-testid="empty-value">-</span>.

Key edge cases:

• 0 (zero) is rendered as-is because it passes the null/undefined/empty-string checks.
• Whitespace-only strings like " " are treated as empty.
• Numeric values are coerced to string by React and rendered normally.

Examples

Happy Path

<EmptyValueTag value="Active" />
<!-- Renders: <span>Active</span> -->

Edge Case — Zero vs Empty

<EmptyValueTag value={0} />
<!-- Renders: <span>0</span> (zero is a valid value, not empty) -->

<EmptyValueTag value={null} />
<!-- Renders: <span data-testid="empty-value">-</span> -->

Notes

• The data-testid="empty-value" attribute on the fallback span enables stable test assertions.
• The component has no styling of its own — the surrounding context determines presentation.
• There are no dependencies beyond React.

Known Constraints

• The component does not truncate long strings. Use a separate utility for that.
• There is no maxLength or ellipsis behaviour.

Change Impact

• codes/frontend/core/Tags/PrecisionNumberTag — delegates to EmptyValueTag for empty/invalid input.

See Also

• PrecisionNumberTag — number formatter that uses EmptyValueTag for its fallback state.