simplified formik radio handling, attach label to input

src/components/formik-forms/formik-radio-button.jsx

@@ -10,24 +10,26 @@ require('./formik-radio-button.scss');
 require('../forms/row.scss');
 
 const FormikRadioButtonSubComponent = ({
-    buttonValue,
     children,
     className,
-    field,
+    field, // field.value is the current selected value of the entire radio group
+    id,
     label,
     labelClassName,
+    value,
     ...props
 }) => (
     <React.Fragment>
         <input
-            checked={buttonValue === field.value}
+            checked={value === field.value}
             className={classNames(
                 'formik-radio-button',
                 className
             )}
+            id={id}
             name={field.name}
             type="radio"
-            value={buttonValue}
+            value={value}
             onBlur={field.onBlur} /* eslint-disable-line react/jsx-handler-names */
             onChange={field.onChange} /* eslint-disable-line react/jsx-handler-names */
             {...props}
@@ -39,7 +41,6 @@ const FormikRadioButtonSubComponent = ({
                     'formik-radio-label',
                     labelClassName
                 )}
-                htmlFor={buttonValue}
             >
                 {label}
             </label>
@@ -49,7 +50,6 @@ const FormikRadioButtonSubComponent = ({
 );
 
 FormikRadioButtonSubComponent.propTypes = {
-    buttonValue: PropTypes.string,
     children: PropTypes.node,
     className: PropTypes.string,
     field: PropTypes.shape({
@@ -58,6 +58,7 @@ FormikRadioButtonSubComponent.propTypes = {
         onChange: PropTypes.function,
         value: PropTypes.string
     }),
+    id: PropTypes.string,
     label: PropTypes.string,
     labelClassName: PropTypes.string,
     value: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
@@ -65,21 +66,23 @@ FormikRadioButtonSubComponent.propTypes = {
 
 
 const FormikRadioButton = ({
-    buttonValue,
     className,
+    id,
     isCustomInput,
     label,
     name,
     onSetCustom,
+    value,
     ...props
 }) => (
     <Field
-        buttonValue={buttonValue}
         className={className}
         component={FormikRadioButtonSubComponent}
+        id={id}
         label={label}
         labelClassName={isCustomInput ? 'formik-radio-label-other' : ''}
         name={name}
+        value={value}
         {...props}
     >
         {isCustomInput && (
@@ -97,8 +100,8 @@ const FormikRadioButton = ({
 );
 
 FormikRadioButton.propTypes = {
-    buttonValue: PropTypes.string,
     className: PropTypes.string,
+    id: PropTypes.string,
     isCustomInput: PropTypes.bool,
     label: PropTypes.string,
     name: PropTypes.string,

src/components/join-flow/gender-step.jsx

@@ -11,10 +11,12 @@ const JoinFlowStep = require('./join-flow-step.jsx');
 require('./join-flow-steps.scss');
 
 const GenderOption = ({
+    id,
     label,
     onSetFieldValue,
     selectedValue,
-    value
+    value,
+    ...props
 }) => (
     <div
         className={classNames(
@@ -29,17 +31,20 @@ const GenderOption = ({
         /* eslint-enable react/jsx-no-bind */
     >
         <FormikRadioButton
-            buttonValue={value}
             className={classNames(
                 'join-flow-radio'
             )}
+            id={id}
             label={label}
             name="gender"
+            value={value}
+            {...props}
         />
     </div>
 );
 
 GenderOption.propTypes = {
+    id: PropTypes.string,
     label: PropTypes.string,
     onSetFieldValue: PropTypes.func,
     selectedValue: PropTypes.string,
@@ -89,12 +94,14 @@ class GenderStep extends React.Component {
                             onSubmit={handleSubmit}
                         >
                             <GenderOption
+                                id="GenderRadioOptionFemale"
                                 label={this.props.intl.formatMessage({id: 'general.female'})}
                                 selectedValue={values.gender}
                                 value="Female"
                                 onSetFieldValue={setFieldValue}
                             />
                             <GenderOption
+                                id="GenderRadioOptionMale"
                                 label={this.props.intl.formatMessage({id: 'general.male'})}
                                 selectedValue={values.gender}
                                 value="Male"
@@ -120,12 +127,13 @@ class GenderStep extends React.Component {
                             >
                                 <FormikRadioButton
                                     isCustomInput
-                                    buttonValue={values.custom}
                                     className={classNames(
                                         'join-flow-radio'
                                     )}
+                                    id="GenderRadioOptionCustom"
                                     label={this.props.intl.formatMessage({id: 'registration.genderOptionAnother'})}
                                     name="gender"
+                                    value={values.custom}
                                     /* eslint-disable react/jsx-no-bind */
                                     onSetCustom={newCustomVal => setValues({
                                         gender: newCustomVal,
@@ -135,6 +143,7 @@ class GenderStep extends React.Component {
                                 />
                             </div>
                             <GenderOption
+                                id="GenderRadioOptionPreferNot"
                                 label={this.props.intl.formatMessage({id: 'registration.genderOptionPreferNotToSay'})}
                                 selectedValue={values.gender}
                                 value="Prefer not to say"