Transparent Elements

2,216 words

This article is part of a series: The Framework Field Guide - Fundamentals

  1. Part 1: Preface
  2. Part 2: Introduction to Components
  3. Part 3: Dynamic HTML
  4. Part 4: Side Effects
  5. Part 5: Derived Values
  6. Part 6: Transparent Elements
  7. Part 7: Passing Children
  8. Part 8: Element Reference
  9. Part 9: Component Reference
  10. Part 10: Error Handling
  11. Part 11: Dependency Injection
  12. Part 12: Portals
  13. Part 13: Shared Component Logic
  14. Part 14: Directives
  15. Part 15: Accessing Children
  16. Part 16: Framework Comparison Table

Whew! That last chapter was a doozy. Let's slow things down a bit for this chapter: Short and sweet.

Let's think back to the "Dynamic HTML" and "Intro to Components" chapters, where we were building our File and FileList components:

const File = ({ href, fileName, isSelected, onSelected, isFolder }) => {	const [inputDate, setInputDate] = useState(new Date());	// ...	return (		<button			onClick={onSelected}			style={				isSelected					? { backgroundColor: "blue", color: "white" }					: { backgroundColor: "white", color: "blue" }			}		>			{fileName}			{isFolder ? <span>Type: Folder</span> : <span>Type: File</span>}			{!isFolder && <FileDate inputDate={inputDate} />}		</button>	);};const FileList = () => {	// ...	return (		// ...		<ul>			{filesArray.map((file, i) => (				<li key={file.id}>					{(!onlyShowFiles || !file.isFolder) && (						<File							isSelected={selectedIndex === i}							onSelected={() => onSelected(i)}							fileName={file.fileName}							href={file.href}							isFolder={file.isFolder}						/>					)}				</li>			))}		</ul>		// ...	);};

React Transparent Files Before - StackBlitz

Edit

Files

  • src
import { createRoot } from "react-dom/client";import { useState, useEffect, useMemo } from "react";const FileDate = ({ inputDate }) => {	const dateStr = useMemo(() => formatDate(inputDate), [inputDate]);	const labelText = useMemo(() => formatReadableDate(inputDate), [inputDate]);	return <span aria-label={labelText}>{dateStr}</span>;};const File = ({ href, fileName, isSelected, onSelected, isFolder }) => {	const [inputDate, setInputDate] = useState(new Date());	useEffect(() => {		// Check if it's a new day every 10 minutes		const timeout = setTimeout(			() => {				const newDate = new Date();				if (inputDate.getDate() === newDate.getDate()) return;				setInputDate(newDate);			},			10 * 60 * 1000,		);		return () => clearTimeout(timeout);	}, [inputDate]);	return (		<button			onClick={onSelected}			style={				isSelected					? { backgroundColor: "blue", color: "white" }					: { backgroundColor: "white", color: "blue" }			}		>			{fileName}			{isFolder ? <span>Type: Folder</span> : <span>Type: File</span>}			{!isFolder && <FileDate inputDate={inputDate} />}		</button>	);};const filesArray = [	{		fileName: "File one",		href: "/file/file_one",		isFolder: false,		id: 1,	},	{		fileName: "File two",		href: "/file/file_two",		isFolder: false,		id: 2,	},	{		fileName: "File three",		href: "/file/file_three",		isFolder: false,		id: 3,	},	{		fileName: "Folder one",		href: "/file/folder_one/",		isFolder: true,		id: 4,	},	{		fileName: "Folder two",		href: "/file/folder_two/",		isFolder: true,		id: 5,	},];const FileList = () => {	const [selectedIndex, setSelectedIndex] = useState(-1);	const onSelected = (idx) => {		if (selectedIndex === idx) {			setSelectedIndex(-1);			return;		}		setSelectedIndex(idx);	};	const [onlyShowFiles, setOnlyShowFiles] = useState(false);	const toggleOnlyShow = () => setOnlyShowFiles(!onlyShowFiles);	return (		<div>			<button onClick={toggleOnlyShow}>Only show files</button>			<ul>				{filesArray.map((file, i) => (					<li key={file.id}>						{(!onlyShowFiles || !file.isFolder) && (							<File								isSelected={selectedIndex === i}								onSelected={() => onSelected(i)}								fileName={file.fileName}								href={file.href}								isFolder={file.isFolder}							/>						)}					</li>				))}			</ul>		</div>	);};createRoot(document.getElementById("root")).render(<FileList />);function formatDate(inputDate) {	// Month starts at 0, annoyingly	const month = inputDate.getMonth() + 1;	const date = inputDate.getDate();	const year = inputDate.getFullYear();	return month + "/" + date + "/" + year;}function formatReadableDate(inputDate) {	const months = [		"January",		"February",		"March",		"April",		"May",		"June",		"July",		"August",		"September",		"October",		"November",		"December",	];	const monthStr = months[inputDate.getMonth()];	const dateSuffixStr = dateSuffix(inputDate.getDate());	const yearNum = inputDate.getFullYear();	return monthStr + " " + dateSuffixStr + "," + yearNum;}function dateSuffix(dayNumber) {	const lastDigit = dayNumber % 10;	if (lastDigit == 1 && dayNumber != 11) {		return dayNumber + "st";	}	if (lastDigit == 2 && dayNumber != 12) {		return dayNumber + "nd";	}	if (lastDigit == 3 && dayNumber != 13) {		return dayNumber + "rd";	}	return dayNumber + "th";}

While this theoretically works, there's a significant problem with it. Let's take a look at what the HTML looks like when rendering with onlyShowFiles=true and the following filesArray:

[	{		fileName: "File one",		href: "/file/file_one",		isFolder: false,		id: 1,	},	{		fileName: "Folder one",		href: "",		isFolder: true,		id: 2,	},];

Because our conditional statement is on the li when rendered to the DOM, it might look something like this:

<!-- ... --><ul>	<li>		<!-- File Component -->		<button>...</button>	</li>	<li></li></ul><!-- ... -->

While this might not seem like a big problem at first, the fact that there's an empty li in the middle of our ul introduces three issues:

  1. It will leave an empty space created by any styling you have applied to the li.
  2. Any assistive technologies, like screen readers, will read out that there's an empty item, which is a confusing behavior for those users.
  3. Any search engines reading data off of your page may incorrectly assume that your list is intentionally empty, thus potentially impacting your ranking on sites.

Solving these issues is where something called "transparent elements" comes into play. See, ideally, what we want to have is something like a tag that renders to nothing.

This means that if we could instead generate something like the following pseudo-syntax in framework code:

<ul>	<nothing>		<li>			<button>...</button>		</li>	</nothing>	<nothing></nothing></ul>

We could render this into the DOM itself:

<ul>	<li>		<button>...</button>	</li></ul>

Luckily for us, each of the three frameworks provides a method for doing so, simply with a different syntax. Let's see how each framework does so:

In React, we use something called a "Fragment" in place of the nothing component.

import { Fragment } from "react";// ...<ul>	{filesArray.map((file, i) => (		<Fragment key={file.id}>			{(!onlyShowFiles || !file.isFolder) && (				<li>					<File						isSelected={selectedIndex === i}						onSelected={() => onSelected(i)}						fileName={file.fileName}						href={file.href}						isFolder={file.isFolder}					/>				</li>			)}		</Fragment>	))}</ul>;

React Transparent Files After - StackBlitz

Edit

Files

  • src
import { createRoot } from "react-dom/client";import { useState, useEffect, useMemo, Fragment } from "react";const FileDate = ({ inputDate }) => {	const dateStr = useMemo(() => formatDate(inputDate), [inputDate]);	const labelText = useMemo(() => formatReadableDate(inputDate), [inputDate]);	return <span aria-label={labelText}>{dateStr}</span>;};const File = ({ href, fileName, isSelected, onSelected, isFolder }) => {	const [inputDate, setInputDate] = useState(new Date());	useEffect(() => {		// Check if it's a new day every 10 minutes		const timeout = setTimeout(			() => {				const newDate = new Date();				if (inputDate.getDate() === newDate.getDate()) return;				setInputDate(newDate);			},			10 * 60 * 1000,		);		return () => clearTimeout(timeout);	}, [inputDate]);	return (		<button			onClick={onSelected}			style={				isSelected					? { backgroundColor: "blue", color: "white" }					: { backgroundColor: "white", color: "blue" }			}		>			{fileName}			{isFolder ? <span>Type: Folder</span> : <span>Type: File</span>}			{!isFolder && <FileDate inputDate={inputDate} />}		</button>	);};const filesArray = [	{		fileName: "File one",		href: "/file/file_one",		isFolder: false,		id: 1,	},	{		fileName: "File two",		href: "/file/file_two",		isFolder: false,		id: 2,	},	{		fileName: "File three",		href: "/file/file_three",		isFolder: false,		id: 3,	},	{		fileName: "Folder one",		href: "/file/folder_one/",		isFolder: true,		id: 4,	},	{		fileName: "Folder two",		href: "/file/folder_two/",		isFolder: true,		id: 5,	},];const FileList = () => {	const [selectedIndex, setSelectedIndex] = useState(-1);	const onSelected = (idx) => {		if (selectedIndex === idx) {			setSelectedIndex(-1);			return;		}		setSelectedIndex(idx);	};	const [onlyShowFiles, setOnlyShowFiles] = useState(false);	const toggleOnlyShow = () => setOnlyShowFiles(!onlyShowFiles);	return (		<div>			<button onClick={toggleOnlyShow}>Only show files</button>			<ul>				{filesArray.map((file, i) => (					<Fragment key={file.id}>						{(!onlyShowFiles || !file.isFolder) && (							<li>								<File									isSelected={selectedIndex === i}									onSelected={() => onSelected(i)}									fileName={file.fileName}									href={file.href}									isFolder={file.isFolder}								/>							</li>						)}					</Fragment>				))}			</ul>		</div>	);};createRoot(document.getElementById("root")).render(<FileList />);function formatDate(inputDate) {	// Month starts at 0, annoyingly	const month = inputDate.getMonth() + 1;	const date = inputDate.getDate();	const year = inputDate.getFullYear();	return month + "/" + date + "/" + year;}function formatReadableDate(inputDate) {	const months = [		"January",		"February",		"March",		"April",		"May",		"June",		"July",		"August",		"September",		"October",		"November",		"December",	];	const monthStr = months[inputDate.getMonth()];	const dateSuffixStr = dateSuffix(inputDate.getDate());	const yearNum = inputDate.getFullYear();	return monthStr + " " + dateSuffixStr + "," + yearNum;}function dateSuffix(dayNumber) {	const lastDigit = dayNumber % 10;	if (lastDigit == 1 && dayNumber != 11) {		return dayNumber + "st";	}	if (lastDigit == 2 && dayNumber != 12) {		return dayNumber + "nd";	}	if (lastDigit == 3 && dayNumber != 13) {		return dayNumber + "rd";	}	return dayNumber + "th";}

Fragment Alternative Syntax

Fragment also has an alternative syntax in JSX. Instead of <Fragment></Fragment>, you can simply do <></>. This shorthand removes the need for the import and makes the above code sample read like this:

<ul>	{filesArray.map((file, i) => (		<>			{(!onlyShowFiles || !file.isFolder) && (				<li>					<File />				</li>			)}		</>	))}</ul>

You may notice that <> syntax for Fragment does not have a key associated with it. This is because the <> syntax does not allow you to have props associated with it.

However, this means that your loop will still misbehave and add performance overhead as a penalty for not including key (as we discussed in the "Dynamic HTML" chapter). For this reason, when inside a map loop, you'll want to use Fragment with a key property associated with it.

Stacking Transparent Elements

Just as a quick note, not only can these nothing elements be used once, but they can be stacked back-to-back to do... Well, nothing!

Here are some code samples that render out the following:

<p>Test</p>
<>	<>		<>			<p>Test</p>		</>	</></>

React Stacked Transparent - StackBlitz

Edit

Files

  • src
import { createRoot } from "react-dom/client";const App = () => {	return (		<>			<>				<>					<p>Test</p>				</>			</>		</>	);};createRoot(document.getElementById("root")).render(<App />);

Challenge

Now that we understand how to render a transparent element (transparent to the DOM, anyway), let's build out an example where this would be useful.

Namely, let's assume that we want to build out a bar of buttons with a gap between them:

Four buttons are next to each other. "Delete", "Copy", "Favorite", and "Settings"

To do this with HTML, we might have the following template and styling:

<div	style="    display: 'inline-flex',	gap: 1rem;  ">	<button>Delete</button>	<button>Copy</button>	<button>Favorite</button>	<button>Settings</button></div>

However, what if we wanted to only display the first three buttons:

  • Delete
  • Copy
  • Favorite

Only when a file is selected?

Let's build this out using our favorite frameworks:

const FileActionButtons = ({ onDelete, onCopy, onFavorite }) => {	return (		<div>			<button onClick={onDelete}>Delete</button>			<button onClick={onCopy}>Copy</button>			<button onClick={onFavorite}>Favorite</button>		</div>	);};const ButtonBar = ({	onSettings,	onDelete,	onCopy,	onFavorite,	fileSelected,}) => {	return (		<div			style={{				display: "flex",				gap: "1rem",			}}		>			{fileSelected && (				<FileActionButtons					onDelete={onDelete}					onCopy={onCopy}					onFavorite={onFavorite}				/>			)}			<button onClick={onSettings}>Settings</button>		</div>	);};

Oh no! The rendered output isn't as we expected!

The first three buttons are bunched together in a weird way without the expected gap we were hoping for

That's because when we used a div for our FileActionButtons component, it bypassed the gap property of CSS. To fix this, we can use our handy dandy nothing element:

// FileActionButtons<>	<button onClick={onDelete}>Delete</button>	<button onClick={onCopy}>Copy</button>	<button onClick={onFavorite}>Favorite</button></>
Final code output

React Dynamic Challenge - StackBlitz

Edit

Files

  • src
import { createRoot } from "react-dom/client";const FileActionButtons = ({ onDelete, onCopy, onFavorite }) => {	return (		<>			<button onClick={onDelete}>Delete</button>			<button onClick={onCopy}>Copy</button>			<button onClick={onFavorite}>Favorite</button>		</>	);};const ButtonBar = ({	onSettings,	onDelete,	onCopy,	onFavorite,	fileSelected,}) => {	return (		<div			style={{				display: "flex",				gap: "1rem",			}}		>			{fileSelected && (				<FileActionButtons					onDelete={onDelete}					onCopy={onCopy}					onFavorite={onFavorite}				/>			)}			<button onClick={onSettings}>Settings</button>		</div>	);};const App = () => {	function alertMe(str) {		alert("You have pressed on " + str);	}	return (		<ButtonBar			fileSelected={true}			onSettings={() => alertMe("settings")}			onDelete={() => alertMe("delete")}			onCopy={() => alertMe("copy")}			onFavorite={() => alertMe("favorite")}		/>	);};createRoot(document.getElementById("root")).render(<App />);
Previous articleDerived Values
Next article Passing Children

Subscribe to our newsletter!

Subscribe to our newsletter to get updates on new content we create, events we have coming up, and more! We'll make sure not to spam you and provide good insights to the content we have.

View this post on GitHub Join our Discord server