handleChange works with checkboxes too

Author: sametweb

package-lock.json

@@ -2,7 +2,7 @@
   "name": "react-step-builder",
   "description": "Unopinionated multi step interface builder.",
   "author": "Samet Mutevelli <[email protected]> (https://sametmutevelli.com)",
-  "version": "1.1.11",
+  "version": "1.1.12",
   "private": false,
   "devDependencies": {
     "@babel/cli": "^7.8.4",

package.json

@@ -19,6 +19,13 @@ const Step1 = (props) => {
         value={props.getState("lastname")}
         onChange={props.handleChange}
       />
+      Over 18?{" "}
+      <input
+        type="checkbox"
+        name="over18"
+        checked={props.getState("over18")}
+        onChange={props.handleChange}
+      />
       <span>
         <button
           data-testid="green"

src/App.js

@@ -13,8 +13,9 @@ export function useStepState(INITIAL_VALUE) {
    * @param {string} value - Data to be stored.
    */
   function setStepState(key, value) {
-    state[key] = value;
-    setState(state);
+    var new_state = JSON.parse(JSON.stringify(state));
+    new_state[key] = value;
+    setState(new_state);
   }
 
   /**
@@ -36,7 +37,10 @@ export function useStepState(INITIAL_VALUE) {
 
     */
     var key = event.target.name,
-      value = event.target.value;
+      value =
+        event.target.type === "checkbox"
+          ? event.target.checked
+          : event.target.value;
 
     var new_state = JSON.parse(JSON.stringify(state));
     new_state[key] = value;