title: React: How to determine if a collection of radio buttons have a selected item?
body: <p>Given the following unordered HTML/JSX list:</p>
  
  <pre><code>&lt;ul className="settings"&gt;
    &lt;li&gt;
      &lt;input type="radio" name="settings" id="beginner" ref={selectedSetting} onClick={handleSettingsChange}/&gt;
      &lt;label htmlFor="beginner"&gt;Beginner&lt;/label&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;input type="radio" name="settings" id="intermediate" ref={selectedSetting} onClick={handleSettingsChange}/&gt;
      &lt;label htmlFor="intermediate"&gt;Intermediate&lt;/label&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;input type="radio" name="settings" id="expert" ref={selectedSetting} onClick={handleSettingsChange}/&gt;
      &lt;label htmlFor="expert"&gt;Expert&lt;/label&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;input type="radio" name="settings" id="custom" ref={selectedSetting} onClick={handleSettingsChange}/&gt;
      &lt;label htmlFor="custom"&gt;Custom&lt;/label&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>with a submit button that fires the following function:</p>
  
  <pre><code>const onSubmit = (e: MouseEvent): void =&gt; {
    console.log(selectedSetting.current)
  }
  </code></pre>
  
  <p>I want to validate that at least one of these radio buttons have been selected. As you can see I was using a single <code>useRef</code> variable here which would cause the "custom" radio button to be logged every time. The straight forward solution, then, is to have a useRef for each radio button but is there an easier way to do this? Can I instead give the <code>ul</code> tag a <code>ref</code> and do something similar to jQuery to see if one of them has been selected?</p>