RadioGroup and RadioItem

App.js

// @flow

import React from 'react';
import {RadioItem, RadioGroup} from './Radio';
type P = {};
type S = {};

class App extends React.Component<P, S> {
  render() {
    return (
      <div>
        <h1>Radio Color</h1>
        <RadioGroup name="favColor">
          <RadioItem>Red</RadioItem>
          <RadioItem>Green</RadioItem>
          <RadioItem>Blue</RadioItem>
        </RadioGroup>

        <h1>Radio Car</h1>
        <RadioGroup name="favCar">
          <RadioItem>Mercy</RadioItem>
          <RadioItem>BMW</RadioItem>
          <RadioItem>Tesla</RadioItem>
        </RadioGroup>
      </div>
    );
  }
}

export default App;

Radio.js

// @flow

import React from 'react';

type RadioItemProps = {
  name?: string,
  children?: string,
};

type RadioGroupProps = {
  name: string,
  children: Array<RadioItem>,
};

export let RadioGroup = (props: RadioGroupProps) => {
  let {children, name} = props;
  let childrenWithProps = React.Children.map(children, (RadioItem) => {
    return React.cloneElement(RadioItem, {name: name});
  });
  return <div>{childrenWithProps}</div>;
};

export let RadioItem = (props: RadioItemProps) => {
  let {name, children} = props;
  return (
    <div>
      <input type="radio" id={children} name={name} />
      <label htmlFor={children}>{children}</label>
    </div>
  );
};

RadioWithContext.js

// @flow

import React from 'react';
import PropTypes from 'prop-types';

type RadioItemProps = {
  name?: string,
  children?: string,
};

type RadioGroupProps = {
  name: string,
  children: Array<RadioItem>,
};

export class RadioGroup extends React.Component<RadioGroupProps> {
  getChildContext() {
    return {name: this.props.name};
  }

  static childContextTypes = {
    name: PropTypes.string,
  };

  render() {
    let {children} = this.props;
    return <div>{children}</div>;
  }
}

export function RadioItem(props: RadioItemProps, context: Object) {
  let {children} = props;
  return (
    <div>
      <input type="radio" id={children} name={context.name} />
      <label htmlFor={children}>{children}</label>
    </div>
  );
}

RadioItem.contextTypes = {
  name: PropTypes.string,
};