Detecting changed value from radio inputs

[viveleroi]

I've got two radio inputs inside a custom "date picket" component, which is a child of a Formik component.

The chooser has two radios for selecting dates. I need to switch between some Date objects when these radio values change. However, I cannot figure out a way to listen to the changes.

<RadioInput
        label={ 'Soonest Available (' + soonestAvailable() + ')' }
        name="dateChoice"
        value="soonest"
        required
    />
    <RadioInput
        label="Choose from Calendar"
        name="dateChoice"
        value="calendar"
        required
    />

Using onChange works but breaks Formik, it longer reads the value changes when I interact with the radios.

If I try to get the field using a context, it fires multiple times and gives me both values, like something is broken. I assume this is not the right approach in this scenario.

const {
    values: { dateChoice }
} = useFormikContext();

Here is the RadioInput component:

function RadioInput({ label, ...props }) {
    const [field] = useField(props);

    if (field.value === props.value) {
        props.checked = true;
    }

    return (
        <div className="flex items-center">
            <input type="radio" {...field} {...props}
                className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" />
            <label htmlFor={props.id || props.name} className="ml-2 block text-sm text-gray-900">
                {label}
            </label>
        </div>
    );
}

[BekahHW]

I'm not totally sure I understand what you're trying to do, but can you use useEffect?

userEffect(() => {
if (props.values.dateChoice === soonest) {

do what you need to do}, [props.values.dateChoice])

OR

have you looked at setFieldTouched? This issue might help.

[viveleroi]

This is what I wound up using but for some reason it was firing multiple times, sending in both radio values, and wiping the actual value. I broke apart my components even more and cleaned up the logic as best as I could and that seemed to help.