I feel like I must be missing something staring me right in the face, but when I copy the code from the calcite website for the radio button group into react, add an oncalciteRadioButtonGroupChange event listener, and console log the event.target.value, I get undefined. If I log the event, I cannot see any hint of which radio button was clicked to trigger the event.
What am I missing?
const handleSelection = (evt) => {
console.log('group change', evt.target.value)
}
return (
<calcite-radio-button-group oncalciteRadioButtonGroupChange={handleSelection} name="impairment" layout="vertical">
<calcite-label layout="inline">
<calcite-radio-button checked={selectedImpairment === 'phosphorus'} value="phosphorus"></calcite-radio-button>
Phosphorus
</calcite-label>
<calcite-label layout="inline">
<calcite-radio-button checked={selectedImpairment === 'fecal-indicator-bacteria'} value="fecal-indicator-bacteria"></calcite-radio-button>
Fecal indicator bacteria
</calcite-label>
<calcite-label layout="inline">
<calcite-radio-button checked={selectedImpairment === 'biological-integrity'} value="biological-integrity"></calcite-radio-button>
Biological integrity
</calcite-label>
</calcite-radio-button-group>
Solved! Go to Solution.
Mel let me know the solution! Instead of using event.target.value, use event.target.selectedItem.value.
Mel let me know the solution! Instead of using event.target.value, use event.target.selectedItem.value.