From 9422aa0bd807c366eb536676351fc5d7475fda2f Mon Sep 17 00:00:00 2001
From: Zachary Taylor <zacharytaylor@tutamail.com>
Date: Thu, 22 Dec 2022 14:55:48 -0600
Subject: [PATCH] Adding missing challenge setup code from workshop

---
 components/payment-form/presets-custom-amounts.js | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/components/payment-form/presets-custom-amounts.js b/components/payment-form/presets-custom-amounts.js
index 613843d..2a99e49 100644
--- a/components/payment-form/presets-custom-amounts.js
+++ b/components/payment-form/presets-custom-amounts.js
@@ -1,18 +1,23 @@
 import React, {useRef, useState} from "react"
 
 const PresetsCustomAmounts = ({amounts}) => {
+  const [selectedOption, setSelectedOption] = useState(false)
     const customAmtRadio = useRef(null)
-    
+
     const focusInCustomInput = () => {
         customAmtRadio.current.checked = true
     }
-
+    const handleChange = (event) => {
+      if (event.target.checked) {
+        setSelectedOption(event.target.value);
+      }
+    }
     return (
         <>
-            {amounts.map((amount, index)=> {
+            {amounts.map((amount, index) => {
                 return <label key={index}>
                     <input
-                        checked={selectedOption == amount}
+                        checked={selectedOption === amount}
                         id={`amt_${amount}`}
                         name="amounts"
                         onChange={(event) => handleChange(event)}
@@ -24,8 +29,10 @@ const PresetsCustomAmounts = ({amounts}) => {
             })}
             <label className="custom-radio-group">
                 <input
+                    checked={selectedOption === 'Custom'}
                     id="amt_custom"
                     name="amounts"
+                    onChange={(event) => handleChange(event)}
                     ref={customAmtRadio}
                     type="radio"
                     value="Custom"