Skip to content

Conditionally set an HTML attribute

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>
→ Get my HTML Handbook

I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter

JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025

Bootcamp 2025

Join the waiting list