title: React: Unselect all radio buttons via button click
body: <p>I have a component that renders three <strong>custom</strong> radio buttons. The user can either submit the selected or clear (unselect) them, leaving with no selected radio buttons.</p>
  
  <p>I tried some options with comparing the <code>filterResult</code> to the <code>data.value</code>, but without success. Here's a simplified code:</p>
  
  <pre><code>// imports
  ...
  
  type Props = {
    filterConfig: PropTypes.object,
    filterValue: Proptypes.string,
    onFilterChange: PropTypes.func
  }
  
  class Filter extends React.Component {
    this.props = Props
    this.state = {
      filterValue: this.props.filterValue,
    }
  
    handleChange = (e) =&gt; {
      this.setState({ filterValue: e.target.value })
    }
  
    handleSubmit = () =&gt; {
      this.props.onFilterChange(this.state.filterValue)
      this.refs.filterContainer.close()
    }
  
    handleClear = () =&gt; {
      this.setState({ filterValue: '' })
    }
  
    renderOptions = () =&gt; {
      const { data, name } = this.props.filterConfig
      const options = data.map(
        (o, i) =&gt; (
          &lt;div className='custom-radio' key={i}&gt;
            &lt;input
              id={`${name}-${i}`}
              name={name}
              onChange={this.handleChange}
              type='radio'
              value={o.value}
            /&gt;
            &lt;label htmlFor={`${name}-${i}`}&gt;
              &lt;span /&gt;
              {o.label}
            &lt;/label&gt;
          &lt;/div&gt;
        )
      )
  
      return (
        &lt;div&gt;
          {options}
        &lt;/div&gt;
      )
    }
  
    renderPickerNavigation = () =&gt; {
      return (
        &lt;div&gt;
          &lt;a
            href='javascript:void(0)'
            onClick={this.handleClear}
          &gt;
            Clear
          &lt;/a&gt;
          &lt;a
            href='javascript:void(0)'
            onClick={this.handleSubmit}
          &gt;
            Done
          &lt;/a&gt;
        &lt;/div&gt;
      )
    }
  
    render = () =&gt; {
      return (
        &lt;FilterWrapper
          ref='filterWrapper'
        &gt;
          {this.renderOptions()}
          {this.renderPickerNavigation()}
        &lt;/FilterWrapper&gt;
      )
    }
  }
  </code></pre>
  
  <p>The data I'm passing in is:</p>
  
  <pre><code>const filters = [
    {
      data: [{
        label: 'Label 1',
        value: 1
      }, {
        label: 'Label 2',
        value: 2
      }, {
        label: 'Label 3',
        value: 3
      }],
      name: 'userFilter'
    }
  ]
  </code></pre>
  
  <p>EDIT: The click event on the native radio input works fine, so no need to change that to be on the custom radio (the <code>span</code> element) or the label.</p>