Conditionally set an HTML attribute

Dec 22, 2023

Learn how to conditionally set an HTML attribute like selected in Astro using object spread, so the attribute only appears when your condition is true.

~~~

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>

Tagged: Astro, HTML · All topics

~~~