Skip to content

Conditionally set an HTML attribute

FULL-STACK WEB DEVELOPMENT BOOTCAMP

2024 COHORT SIGNUPS END TOMORROW

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
β†’ Read my HTML Tutorial
β†’ Read my Astro Tutorial
  • Learn modern web development in my BOOTCAMP (SIGNUP END TOMORROW FEB 20, 2024)
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ coding BOOKS, all available in THE VALLEY OF CODE PRO
  • Indie solopreneur internet business masterclass SOLO LAB (summer 2024)