Skip to content

Conditionally set an HTML attribute

New Courses Coming Soon

Join the waiting lists

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:

	{ => {
	  const attributes = {
	    ...(Astro.url.pathname.includes('/team/') && === && { selected: 'selected' }),
	  return (
	    <option {...attributes} value={`/team/${}`}>
→ Get my HTML Handbook
→ Read my HTML Tutorial on The Valley of Code
→ Read my Astro Tutorial on The Valley of Code

Here is how can I help you: