Radio button validation in React for dynamic number of radio buttons

Question

I have the following React component:

import React from 'react';
import classes from './surveytwo.css';
import { Link } from 'react-router-dom';


const surveyTwo = (props) => {
    return (
        <div className={ classes.screen2 } >

            <table className={ classes.initial__survey__details__table }>
                <thead>
                    <tr>
                        <td>
                            Gender    
                        </td>
                        <td>
                             Age    
                        </td>     
                    </tr>     
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input type="radio" name="customer_gender" />                                     
                            <label>Male</label>
                        </td>
                        <td>
                            <input type="radio" name="customer_name" />                                   
                            <label>Less than 35</label>
                        </td>     
                    </tr>
                    <tr>
                        <td>
                            <input type="radio" name="customer_gender" />                                    
                            <label>Female</label>
                        </td>
                        <td>
                            <input type="radio" name="customer_name" />                                    
                            <label>More than 35</label>
                        </td>     
                    </tr> 
                    <tr>
                        <td colSpan="2">
                            {/* <button className={ [classes.btn , classes["btn--fullwidth"] , classes.btn__next  ].join(' ') }>NEXT</button> */}
                            <Link to="/" className={ [classes.btn , classes["btn--fullwidth"] , classes.btn__next  ].join(' ') }>
                                Survey 1
                            </Link>
                        </td>   
                    </tr>     
                </tbody>   
            </table>

        </div>
    );
}

export default surveyTwo;

As you can see there are 2 groups of radio buttons and a Link route that routes back to the homepage. I want both these radio button groups to be checked before the Link is enabled and the user can click on it, as of now the user can navigate away from this page with/without checking the radio buttons. How can I add this validation ?

Also the radio buttons can increase from 2 groups to a lot more in the future, so how do I go about adding this validation check and disabling the Link to the homepage until all the radio buttons are checked?

Answer 1

Went through a quick draft, maybe not the best solution but hope it helps with the logic behind.

You could store the state of the radio buttons in the state of the component:

state = {
   genderRadioClicked: false,
   ageRadioClicked: false
   // Add any extra group you create later
}

And update it to true with the onChange event from the input using setState.

The validation method will look like this:

_handleRadioValidation = (e) => {

   // Get the state of all the radio buttons
   const radioStates = this.state

   // Iterate through the radio state object and return the value for 
   // every key and assign it to an array
   const checkedStatus = Object.keys(radioStates).map((key) => {
      return radioStates[key];
   });

   // Once you got the array with the value of the group radios (if 
   // the group is checked or not) filter the array to return only if the 
   // value is equal to false (which means that it's not checked)
   const filteredArray = checkedStatus.filter((value) => value === false)

   // If the length of the resulting array from the filtering is bigger
   // than 0 it means one of the group is false (unchecked)
   // Then you just prevent the default behaviour of the event, in this
   // case that is a link, it will disable the link.
   if (filteredArray.length > 0) {
      e.preventDefault();
      return;
   }

   // If all of them are checked it will execute like normal

}

Finally attach this method to the component like this:

<Link to="/" onClick={(e) => this._handleRadioValidation(e)}>

Hope it helps!