I had to conditionally set an attribute while building the HTML of a page.

In particular I wanted to add the selected attribute to an option in a select based on the URL.

I couldn’t say selected={true}, where true is determined with JavaScript, because the mere existence of selected= makes the browser consider the option as selected. So the end result is the last option is always selected by default.

Here’s what I ended up doing:

<select>
	{teams.map((team) => {
	  const attributes = {
	    ...(Astro.url.pathname.includes('/team/') &&
	    Astro.params.id === team.id && { selected: 'selected' }),
	  }
	
	  return (
	    <option {...attributes} value={`/team/${team.id}`}>
	      {team.name}
	    </option>
	  )
	})}
</select>

Lessons in this unit:

0:	Introduction
1:	Preserving white space and line breaks in a string in HTML
2:	HTML, avoid displaying a broken image if the image is not found
3:	The HTML figure tag
4:	Change image source in dark mode
5:	Accept only images in file input
6:	HTML comments
7:	Some useful tricks available in HTML5
8:	How to make an hr invisible
9:	▶︎ Conditionally set an HTML attribute
10:	An HTML element id is a global variable