title: Custom Hook for Radio Button with semantic-ui-react
body: <p>I've created a custom hook to use with a form I've built using semantic-ui-react. The code for the hook looks like this (taken from <a href="https://medium.com/@geeky_writer_/using-react-hooks-to-create-awesome-forms-6f846a4ce57" rel="nofollow noreferrer">here</a> )</p>
  
  <pre><code>import React, { useState } from 'react'
  
  const useForm = callback =&gt; {
    const [inputs, setInputs] = useState({})
    const handleSubmit = event =&gt; {
      if (event) {
        event.preventDefault()
      }
    }
    const handleInputChange = event =&gt; {
      event.persist()
      setInputs(inputs =&gt; ({
        ...inputs,
        [event.target.name]: event.target.value,
      }))
    }
    return {
      handleSubmit,
      handleInputChange,
      inputs,
    }
  }
  
  export default useForm
  </code></pre>
  
  <p>It works perfectly well with all of my text based inputs at the moment, but I've added some radio buttons like this:</p>
  
  <pre><code>&lt;Form.Group inline&gt;
    &lt;label&gt;Number of Hours&lt;/label&gt;
    &lt;Form.Radio
      label="&lt;3 Hours"
      name="hours"
      onChange={handleInputChange}
      value="1"
      checked={inputs.hours === 1}
    /&gt;
    &lt;Form.Radio
      label="3+ Hours"
      name="hours"
      onChange={handleInputChange}
      value="2"
      checked={inputs.hours === 2}
    /&gt;
  &lt;/Form.Group&gt;
  </code></pre>
  
  <p>But the hook doesn't work properly. I've done some digging and it looks like it's because the onChange (I've tried onClick too) seems to fire on the label in semantic-ui-react, so the event doesn't contain the proper target name or value. The only workaround I can think of is to write some custom handler that creates a fake event that looks for the hidden radio input :before the label, but it seems like there should be a cleaner way.</p>
  
  <p><strong>Updated Workaround</strong>
  I created a custom handler for radios as a temporary workaround and also adjusted the <code>checked</code> part to put quotes around the value. It works, but if anyone knows a better way, please share.</p>
  
  <p>This is the custom handler.</p>
  
  <pre><code>  const radioHandleInputChange = e =&gt; {
      let { value, name } = e.target.previousSibling
      e.target.name = name
      e.target.value = value
      handleInputChange(e)
    }
  </code></pre>