Creating dynamic radio buttons with React and Meteor and Simple Schema (using pup boilerplate)

I'm new to reactJS and I'm learning how to use radio buttons using the pup boilerplate.

I'm trying to add an input radio code for icon to /imports/ui/components/DocumentEditor/DocumentEditor.js and this is where I'm at so far:

<FormGroup>
  <ControlLabel>Icon</ControlLabel>
  {['mobile', 'tablet', 'laptop', 'tv'].map((el, i) =>
    <Radio 
      ref={icon => (this.icon = icon)} 
      key={i} 
      name="icon" 
      value={el} 
      onChange={e => this.handleRadioSelection(e)}
      inline>
      <i className={`fa fa-3x fa-${el}`}></i>
    </Radio>
  )}
</FormGroup>

the handler:

handleRadioSelection (e) {
  const { name, value } = e.target;

  this.setState({
    [name]: value
  });
}

the schema (using simpl-schema)

icon: {
  type: String,
  label: 'The icon that better represents the platform.',
  allowedValues: ['mobile', 'tablet', 'laptop', 'tv'],
},

I have 2 questions:

My array is hard coded and I'd like to import the allowedValues array from the schema, how to do it?
My onChange event handler doesn't work, what's missing?

Notes: on the web page I see the radio buttons changing upon radio selection, but the new value doesn't get saved.

Solution

from the docs "You can use schema.getAllowedValuesForKey(key) to get the allowed values array for a key."
You need to bind the function to the this context. Read more on the subject e.g. here. So, in short, either in the constructor do this.handleRadioSelection = this.handleRadioSelection.bind(this); or make it an arrow function:
```
handleRadioSelection = (e) => {
  const { name, value } = e.target;

  this.setState({
    [name]: value
  });
}
```
and use it like:
```
<Radio onChange={this.handleRadioSelection} />
```
For the arrow function to work you need to add the babel plugin for transforming class properties. Do meteor npm install --save-dev babel-plugin-transform-class-properties and add the following to your .babelrc
```
{
  "plugins": ["transform-class-properties"]
}
```