Skip to content

Commit

Permalink
Simplify select element example for Qwik
Browse files Browse the repository at this point in the history
  • Loading branch information
octet-stream committed Apr 27, 2024
1 parent 13f9c94 commit 369f6e7
Showing 1 changed file with 9 additions and 8 deletions.
17 changes: 9 additions & 8 deletions content/6-form-input/4-select/qwik/ColorSelect.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { component$, useStore, $ } from "@builder.io/qwik";
import { component$, useSignal } from "@builder.io/qwik";

export const colors = [
{ id: 1, text: "red" },
Expand All @@ -8,16 +8,17 @@ export const colors = [
];

const ColorSelect = component$(() => {
const store = useStore({ selectedColorId: 2 });

const handleChange = $((event: Event) => {
store.selectedColorId = Number((event.target as HTMLInputElement).value);
});
const selectedColorId = useSignal("2");

return (
<select value={store.selectedColorId} onChange$={handleChange}>
<select bind:value={selectedColorId}>
{colors.map((color) => (
<option value={color.id} disabled={color.isDisabled}>
<option
key={color.id}
value={color.id}
disabled={color.isDisabled}
selected={`${color.id}` === selectedColorId.value}
>
{color.text}
</option>
))}
Expand Down

0 comments on commit 369f6e7

Please sign in to comment.