Send Props to Children in React

radioGroup.js

//Original link: http://jaketrent.com/post/send-props-to-children-react/

function RadioOption(props) {
  return (
    <label>
      <input type="radio" value={props.value} name={props.name} />
      {props.label}
    </label>
  )
}

function renderChildren(props) {
  return React.Children.map(props.children, child => {
    if (child.type === RadioOption)
      return React.cloneElement(child, {
        name: props.name
      })
    else
      return child
  })
}

function RadioGroup(props) {
  return (
    <div class="radio-group">
      {renderChildren(props)}
    </div>
  )
}

function WhereImUsingRadioGroups() {
  return (
    <RadioGroup name="blizzard-games">
      <RadioOption label="Warcraft 2" value="wc2" />
      <RadioOption label="Warcraft 3" value="wc3" />
      <RadioOption label="Starcraft 1" value="sc1" />
      <RadioOption label="Starcraft 2" value="sc2" />
    </RadioGroup>
  )
}
ReactDOM.render(
  <WhereImUsingRadioGroups />,
  document.getElementById('container')
);

//Link demo: http://react.jsbin.com/zewefelige/1/edit?html,css,js,output