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 21 books to help you become a better developer:
- HTML Handbook
- Next.js Pages Router Handbook
- Alpine.js Handbook
- HTMX Handbook
- TypeScript Handbook
- React Handbook
- SQL Handbook
- Git Cheat Sheet
- Laravel Handbook
- Express Handbook
- Swift Handbook
- Go Handbook
- PHP Handbook
- Python Handbook
- Linux Commands Handbook
- C Handbook
- JavaScript Handbook
- Svelte Handbook
- CSS Handbook
- Node.js Handbook
- Vue Handbook
Also, JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - the 2025 edition, starting on February 4th, is now open for signups!