From 4299b6ee30b281f9094332f592cc3c8fb0c8de04 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sun, 24 Nov 2019 20:27:49 +0700
Subject: [PATCH] Use the proper handler for checkbox

---
 client/patterns/radio-switch/Details.jsx | 5 ++---
 client/patterns/switch/Details.jsx       | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/client/patterns/radio-switch/Details.jsx b/client/patterns/radio-switch/Details.jsx
index de5ef3d..bb671e7 100644
--- a/client/patterns/radio-switch/Details.jsx
+++ b/client/patterns/radio-switch/Details.jsx
@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
 import SampleCode from '../../SampleCode';
 
 const Details = () => {
@@ -17,11 +16,11 @@ const Details = () => {
                         <div className="h-100 flex flex-column items-center justify-center">
                             <div className="inline-flex br-pill bg-black-10 pa1">
                                 <label className={`pointer pv3 ph2 br-pill ${isFirstChecked ? 'bg-blue white' : ''}`}>
-                                    <input type="radio" className="dn" checked={isFirstChecked} onClick={toggle} />
+                                    <input type="radio" className="dn" checked={isFirstChecked} onChange={toggle} />
                                     <div className={`w3 br1 ${isFirstChecked ? 'bg-white' : 'bg-black-20'}`} style={{ height: '8px' }}  />
                                 </label>
                                 <label className={`pointer pv3 ph2 br-pill ${isFirstChecked ? '' : 'bg-blue white'}`}>
-                                    <input type="radio" className="dn" checked={!isFirstChecked} onClick={toggle} />
+                                    <input type="radio" className="dn" checked={!isFirstChecked} onChange={toggle} />
                                     <div className={`w3 br1 ${isFirstChecked ? 'bg-black-20' : 'bg-white'}`} style={{ height: '8px' }}  />
                                 </label>
                             </div>
diff --git a/client/patterns/switch/Details.jsx b/client/patterns/switch/Details.jsx
index 55bb127..7d59140 100644
--- a/client/patterns/switch/Details.jsx
+++ b/client/patterns/switch/Details.jsx
@@ -16,7 +16,7 @@ const Details = () => {
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
                             <label className={`ba br-pill h2 w3 flex ${checked ? 'justify-end b--blue bg-blue' : 'b--black-30 bg-black-10'}`}>
-                                <input type="checkbox" className="dn" checked={checked} onClick={toggle} />
+                                <input type="checkbox" className="dn" checked={checked} onChange={toggle} />
                                 <div className={`bg-white br-pill w2 ${checked ? '' : 'ba b--black-30'}`} />
                             </label>
                         </div>