_Consumer.js

static RadioInput = ({ label, value, name, imgSrc }: RadioInputProps) => (
  <RadioImageForm.Consumer>
    {({ currentValue, onChange }) => (
      <label className="radio-button-group" key={value}>
        <input
          type="radio"
          name={name}
          value={value}
          aria-label={label}
          onChange={onChange}
          checked={currentValue === value}
          aria-checked={currentValue === value}
        />
        // ...
      </label>
    )}
  </RadioImageForm.Consumer>
);

_Provider.js

render(): React.ReactElement {
  const { children } = this.props;

  return (
    <RadioImageFormWrapper>
      <RadioImageFormContext.Provider value={this.state}>
        {children}
      </RadioImageFormContext.Provider>
    </RadioImageFormWrapper>
  );
}

index.tsx

// ...
function CurrentValueComponent() {
	return (
		<RadioImageForm.CurrentValue />
	);
}

function SubmitButton() {
	const onSubmit = (value: string): void => {
		alert(`Submitted: ${value}`);
	};

	return <RadioImageForm.SubmitButton onSubmit={onSubmit} />;
}

function App() {
	const [value, setValue] = React.useState(null);

	const onChange = (value: string): void => {
		setValue(value);
	};
return (
		<div className="container App">
			<Banner
				title={'React Component Patterns'}
				subtitle={'Flexible Compound Components'}
			/>
			<div>
				<h1 className="my-5">Parent Value: {value}</h1>
				{/* The parent component that handles the onChange events
				and managing the state of the currently selected value. */}
				<RadioImageForm onStateChange={onChange}>
					<div>
						{/* <CurrentValueComponent /> */}
					</div>
					<form>
						<div>
							{/* The child, sub-components.
							Each sub-component is an radio input displayed as an image
							where the user is able to click an image to select a value. */}
							{DATA.map(
								({ label, value, imgSrc }): React.ReactElement => (
									<RadioImageForm.RadioInput
										label={label}
										value={value}
										name={label}
										imgSrc={imgSrc}
									/>
								),
							)}
						</div>
					</form>
					<div className="d-flex justify-content-center">
						{/* For example purposes only we will bury our submit button in a bunch of divs */}
						<div>
							<div>
								<SubmitButton />
							</div>
						</div>
					</div>
				</RadioImageForm>
			</div>
		</div>
	);
}

// ...