Simple Radio Component that can take any children and wrap it into a Radio choice.

Radio.tsx

import * as React from 'react';
import { v4 as uuid } from 'uuid';

import { styled } from '../styled';

export interface IProps {
  name: string;
}

const StyledRadio = styled.div`
`;

const StyledChoice = styled.p`

`

export default class Radio extends React.Component<IProps, {}> {
  public render() {
    const { children, name } = this.props;

    return (
      <StyledRadio>
        {
          React.Children.toArray(children).map(
            (child: any, key) => {
              const id = uuid();

              return (
                <StyledChoice key={key}>
                  <input type="radio" name={name} id={id} value={key} />
                  <label htmlFor={id}>{child}</label>
                </StyledChoice>
              );
            }
          )
        }
      </StyledRadio>
    );
  }
}