import React from 'react';
const ReactDOM = require('react-dom');
let id = 0;

class Radio extends React.PureComponent {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
    this.id = id++;
  }

  onChange(e) {
    this.props.updateProps({ value: e.target.value });
  }

  render() {
    return (
      <div {...this.props}>
        {this.props.options.map((d) => {
          if (typeof d === 'string') {
            return <label><input type="radio" checked={d === this.props.value} onChange={this.onChange} value={d} name={this.id} />{d}</label>;
          }
          return <label><input type="radio" checked={d.value === this.props.value} onChange={this.onChange} value={d.value} name={this.id} />{d.label || d.value}</label>;
        })}
      </div>
    );
  }
}

Radio.defaultProps = {
  options: []
};


Radio._idyll = {
  name: "Radio",
  tagType: "closed",
  props: [{
    name: "value",
    type: "string",
    example: "x"
  }, {
    name: "options",
    type: "array",
    example: '`["option1", "option2"]`'
  }]
}

export default Radio;

@@ -311,24 +311,108 @@
  render() %7B%0A
+    const %7B idyll, hasError, updateProps, options, value, ...props %7D = this.props;%0A%0A
     return (
@@ -427,21 +427,16 @@
 div %7B...
-this.
 props%7D%3E%0A
@@ -444,27 +444,16 @@
        %7B
-this.props.
 options.
@@ -521,32 +521,40 @@
    return %3Clabel
+ key=%7Bd%7D
 %3E%3Cinput type=%22ra
@@ -569,35 +569,24 @@
 cked=%7Bd === 
-this.props.
 value%7D onCha
@@ -680,16 +680,30 @@
 n %3Clabel
+ key=%7Bd.value%7D
 %3E%3Cinput 
@@ -736,27 +736,16 @@
 lue === 
-this.props.
 value%7D o

fix radio component warning #423