get more then value in the handleChange func

[YosiLeibman]

I have dynamically outputed radio groups, every group gets unique name. in the handleChange func I need get the name in addition to value. my state is a pair of { {groupName} : {selectedValue} } there's a way to get the name somehow?

[marvincolgin]

In regards to getting more information passed to handleChange()... I'm not 100% sure if this is good practice, but you can interrogate the following property in the DOM and it appears to have the correct GroupName::name...

document.activeElement.name

[mdodge-ecgrow]

Thanks @marvincolgin! That worked for me. Although it does feel very "hacky". I'm hoping I can eventually find a better way like passing the actual input RadioGroup name to the function. handleChange(name) I did try that and it does not work.

[mdodge-ecgrow]

OK, so I was playing around with this some more and I think I figured out a better way. This is what worked for me. Here is my RadioGroup:

<RadioGroup
  name={'infoCorrect'}
  selectedValue={userInput.infoCorrect}
  onChange={(val) => handleRadioChange(val, 'infoCorrect')}
>
<label className={'radio'}>
  <Radio value={'yes'} />Yes
</label>
<label className={'radio ml-5'}>
  <Radio value={'no'} />No
</label>
</RadioGroup>

And here is my handleRadioChange:

const handleRadioChange = (val, name) => {
  setUserInput({ [name]: val });
};

And if anyone is curious about where setUserInput is coming from:

const [userInput, setUserInput] = useReducer(
  (state, newState) => ({ ...state, ...newState }),
  initialState
);

I could be wrong here, but I think ultimately, it should be the job of the RadioGroup onChange handler to automatically pass the name along with the value. Would this be very hard to add into the library? I would think it would be the second parameter so the user could just ignore it in the function if they don't need it.