`addEventListener` "onChange" with preact?

[raw portal]

Why does selectProfiles in preact not work?

import type { JSX } from 'preact'
import { getProfiles } from '../lib/aws-profiles'

const profiles = await getProfiles()
if (!profiles)
  throw new Error('No profiles found');

function selectProfile(event: JSX.TargetedEvent<HTMLSelectElement, Event>) {
  console.log(event)
  return ''
//     const profile = event.currentTarget.value;
//   console.log(profile);
}

export default function Profiles() {
  return (
    <select onChange={selectProfile}>
        {profiles?.map(profile => (<option value={profile.sso_session}>{profile.name}</option>
        ))}
    </select>
  )
}

[tranquil sleet]

Hi @raw portal. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Hmm, I don't know enough to give you a confident answer yet. The provided extracts do not contain specific information about the selectProfiles function in Preact or why it might not be working.

However, I can guide you on how to use Preact with Astro. You can install the @astrojs/preact package and apply this integration to your astro.config.* file using the integrations property as shown in the Astro documentation (https://docs.astro.build/en/guides/integrations-guide/preact/).

For issues related to Preact, you might want to check the Preact documentation (https://preactjs.com/guide/v10/getting-started) or seek help from the Preact community.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@raw portal kapa.ai is still learning and improving, please let us know how it did by reacting below

[raw portal]

@tranquil sleet
I am talking specifically about

<select onChange={selectProfile}>
        {profiles?.map(profile => (<option value={profile.sso_session}>{profile.name}</option>
        ))}
    </select>

The onChange does not work.

[tranquil sleet]

Let me check the knowledge base for you. One moment! :books:

---

Astro follows standard HTML more closely and does not use custom syntax for events like onChange={...} which is common in React/Preact. Instead, you can use addEventListener in a <script> tag to handle user interactions.

Here's an example of how you can handle onchange event in Astro:

<select id="profileSelect">
    {profiles?.map(profile => (<option value={profile.sso_session}>{profile.name}</option>))}
</select>

<script>
    // Find the select element on the page.
    const selectElement = document.querySelector('#profileSelect');

    // Handle change event on the select element.
    selectElement.addEventListener('change', (event) => {
        console.log(event.target.value);
    });
</script>

In this example, we're using the standard addEventListener method to listen for the change event on the select element. When the event is triggered, we log the value of the selected option to the console.

Please note that if you have multiple instances of the same component on a page, Astro will not run the script multiple times. Scripts are bundled and only included once per page. Using querySelectorAll ensures that this script attaches the event listener to every select element found on the page.

For more information, you can refer to the Astro documentation on handling events (https://docs.astro.build/en/guides/client-side-scripts/).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: