Extract value from radio group state

components/radio/radio_group.jsx

@@ -15,14 +15,8 @@ class RadioGroup extends React.Component {
     disabled: false
   };
 
-  state = {
-    value: this.props.value
-  };
-
-  handleChange = (value, event) => {
-    this.setState({ value }, () => {
-      if (this.props.onChange) this.props.onChange(event, this);
-    });
+  handleChange = (value) => {
+    if (this.props.onChange) this.props.onChange(value);
   };
 
   renderRadioButtons () {
@@ -30,7 +24,7 @@ class RadioGroup extends React.Component {
       return (
         <RadioButton
           {...radio.props}
-          checked={radio.props.value === this.state.value}
+          checked={radio.props.value === this.props.value}
           disabled={this.props.disabled || radio.props.disabled}
           key={idx}
           label={radio.props.label}
@@ -48,14 +42,6 @@ class RadioGroup extends React.Component {
       </div>
     );
   }
-
-  getValue () {
-    return this.state.value;
-  }
-
-  setValue (value) {
-    this.setState({ value });
-  }
 }
 
 export default RadioGroup;

docs/app/components/layout/main/modules/examples/radio_example_1.txt

@@ -1,10 +1,22 @@
-const RadioTest = () => (
-  <RadioGroup name='comic' value='vvendetta'>
-    <RadioButton label='The Walking Dead' value='thewalkingdead'/>
-    <RadioButton label='From Hell' value='fromhell' disabled/>
-    <RadioButton label='V for a Vendetta' value='vvendetta'/>
-    <RadioButton label='Watchmen' value='watchmen'/>
-  </RadioGroup>
-);
+class RadioTest extends React.Component {
+  state = {
+    value: 'vvendetta'
+  };
+
+  handleChange = (value) => {
+    this.setState({value});
+  };
+
+  render () {
+    return (
+      <RadioGroup name='comic' value={this.state.value} onChange={this.handleChange}>
+        <RadioButton label='The Walking Dead' value='thewalkingdead'/>
+        <RadioButton label='From Hell' value='fromhell' disabled/>
+        <RadioButton label='V for a Vendetta' value='vvendetta'/>
+        <RadioButton label='Watchmen' value='watchmen'/>
+      </RadioGroup>
+    );
+  }
+}
 
 return <RadioTest />;

spec/components/radio.jsx

@@ -2,8 +2,13 @@ import React from 'react';
 import { RadioGroup, RadioButton } from '../../components/radio';
 
 class RadioGroupTest extends React.Component {
-  handleChange = (event, instance) => {
-    console.log('Changed!', { comic: instance.getValue()});
+  state = {
+    value: 'vvendetta'
+  };
+
+  handleChange = (value) => {
+    console.log('Changed!', { comic: value});
+    this.setState({value});
   };
 
   handleFocus = () => {
@@ -20,7 +25,7 @@ class RadioGroupTest extends React.Component {
         <h5>Radio Button</h5>
         <p style={{marginBottom: '10px'}}>Lorem ipsum...</p>
 
-        <RadioGroup ref='group' name='comic' value='vvendetta' onChange={this.handleChange}>
+        <RadioGroup name='comic' value={this.state.value} onChange={this.handleChange}>
           <RadioButton label='The Walking Dead' value='thewalkingdead'/>
           <RadioButton label='From Hell' value='fromhell' disabled/>
           <RadioButton label='V for a Vendetta' value='vvendetta' onFocus={this.handleFocus}/>