OurRadiocomponent file contains several compound components to create a related group of radio inputs. TheRadioGroupContextis receiving a type ofanycurrently.

This is a great example to peer into how Strict mode works. To see the difference between the strict mode's true and false setting, we will setstrict

This also gives us the opportunity to better our application with error handling. I will write out a couple of custom hooks to help out with that.

interface RadioGroupContentValue {
    checked: string | null | undefined;
    onChange(value: string): void;
    name: String;
}

const RadioGroupContext = React.createContext<RadioGroupContentValue | null>(
    null
);

...

let { checked, onChange, name } = useRadioGroupContent("RadioGroup
 
");
...
function useRadioGroupContent(name: string) {
    let ctx = React.useContext(RadioGroupContext);
    if (!ctx) {
        throw Error(`A ${name} was rendered outside a RadioGroup Component`);
    }

    return ctx;
}