From db03990f0ecbd2f374fc2c1e662fd27d6461f7c3 Mon Sep 17 00:00:00 2001
From: Ivn Nv <ivnnv@hotmail.com>
Date: Sat, 3 Oct 2020 16:53:49 +0200
Subject: [PATCH] improved demo example

---
 examples/web/src/index.tsx | 31 ++++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/examples/web/src/index.tsx b/examples/web/src/index.tsx
index 6e90b244..d286b4fe 100755
--- a/examples/web/src/index.tsx
+++ b/examples/web/src/index.tsx
@@ -55,19 +55,32 @@ const ExchangeRates = () => {
   if (error) return <p>Error :(</p>;
 
   const toggleSelectedCurrency = (currency) => {
-    let newSelectedItems: String[] = [...selectedItems, currency];
-    if (selectedItems.find(i => i === currency))
-      newSelectedItems = newSelectedItems.filter(i => i !== currency);
+    let newSelectedItems: String[] = [];
+
+    if (selectedItems.some(i => i === currency))
+      newSelectedItems = selectedItems.filter(i => i !== currency);
+    else
+      newSelectedItems = [...selectedItems, currency]
 
     selectedCurrenciesVar(newSelectedItems);
   }
 
-  return data.rates.map(({ currency, rate }) => (
-    <div key={currency}>
-      <input type="checkbox" id="currency" name="currency" onChange={() => toggleSelectedCurrency(currency)} />
-      <label htmlFor="currency">{`${currency}: ${rate}`}</label>
-    </div>
-  ));
+  return data.rates.map(({ currency, rate }) => {
+    const isCurrencySelected = selectedItems.some(i => i === currency);
+
+    return (
+      <div key={currency}>
+        <label>
+          <input
+            checked={isCurrencySelected}
+            type="checkbox" id="currency" name="currency"
+            onChange={() => toggleSelectedCurrency(currency)}
+          />
+          {`${currency}: ${rate}`}
+        </label>
+      </div>
+    )
+  });
 };
 
 createClient().then(client => {