From 369f6e7f624676efd0e9376171074cdfc20b6129 Mon Sep 17 00:00:00 2001
From: Nick K <nick.kruchinin@gmail.com>
Date: Sat, 27 Apr 2024 22:45:17 +0300
Subject: [PATCH] Simplify select element example for Qwik

---
 .../6-form-input/4-select/qwik/ColorSelect.tsx  | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/content/6-form-input/4-select/qwik/ColorSelect.tsx b/content/6-form-input/4-select/qwik/ColorSelect.tsx
index dbc2803d..713cfcb2 100644
--- a/content/6-form-input/4-select/qwik/ColorSelect.tsx
+++ b/content/6-form-input/4-select/qwik/ColorSelect.tsx
@@ -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" },
@@ -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>
       ))}