http://stackoverflow.com/questions/38236634/get-checked-radio-buttons-value/38237336#38237336 / Live version: http://stackoverflow-38236634.surge.sh/

README.md

Clone and install:

git clone https://gist.github.com/45b7f66e01628601c0cc6b79767b0e4f.git so-38236634
cd so-38236634
npm install

Start a hot reloading development server at http://localhost:3000:

npm start

Create a static production build in dist/:

npm run build

This gist uses nwb for React development tooling

app.js

var classNames = require('classnames')
var React = require('react')
var ReactDOM = require('react-dom')
var uuid = require('uuid')

var Widget = React.createClass({
  render() {
    var {widget} = this.props
    var widgetClasses = classNames('widget', widget.width)
    return <div className={widgetClasses}>
      <header className="widget-header">
        <h3>{widget.title}</h3>
        <p>{widget.description}</p>
      </header>
      <ul>
        <li>Lorem ipsum</li>
      </ul>
      <ul>
        <li>Dolor sit</li>
      </ul>
    </div>
  }
})

var WidgetsContainer = React.createClass({
  render() {
    return <div className="widgetsContainer">
      {this.props.data.map(widget =>
        <Widget key={widget.id} widget={widget}/>
      )}
    </div>
  }
})

var Dashboard = React.createClass({
  getInitialState() {
    return {
      data: []
    }
  },
  handleWidgetConfig(widget) {
    this.setState({
      data: [
        ...this.state.data,
        {id: uuid.v4(), ...widget},
      ]
    })
  },
  render() {
    return <div className="dashboard-content">
     <CreateWidgetDropdown updateWidgetConfig={this.handleWidgetConfig} />
     <WidgetsContainer data={this.state.data} />
    </div>
  }
})

var CreateWidgetDropdown = React.createClass({
  createNewWidget(e) {
    e.preventDefault()

    var form = e.target

    var width =  form.elements.width.value
    var title = form.elements.title.value
    var description = form.elements.description.value

    this.props.updateWidgetConfig({
      width,
      title,
      description,
    })
  },
  render() {
    return <div className="page-dropdown">
      <div className="page-dropdown-header">
        <h2 className="wrapper">Add a Widget</h2>
      </div>
      <div id="page-dropdown-content">
        <form className="page-dropdown-form" onSubmit={this.createNewWidget}>
          <div className="choose-widget-type">
            <h3>Choose a Widget Type</h3>
            <div className="widget-type table">
              <h4>Table</h4>
              <div className="widget-type-icon">
                <img src="" alt="" />
              </div>
              <ul className="widgetWidth">
                <li>
                  <label>
                    1/3 Width
                    {' '}
                    <input name="width" type="radio" value="1/3 Width" defaultChecked/>
                  </label>
                </li>
               <li>
                  <label>
                    2/3 Width
                    {' '}
                    <input name="width" type="radio" value="2/3 Width" />
                  </label>
                </li>
                <li>
                  <label>
                    Full Width
                    {' '}
                    <input name="width" type="radio" value="Full Width" />
                  </label>
                </li>
              </ul>
            </div>

            <div className="create-widget-header">
              <h3>Widget Header (Optional)</h3>
              <label>
                Widget Title (30 characters max)
                {' '}
                <input type="text" name="title" required />
              </label>
              <label>
                Widget Description (50 characters max)
                {' '}
                <textarea name="description"></textarea>
              </label>
            </div>
            <button type="submit">Add Widget</button>
            <button type="reset">Cancel</button>
          </div>
        </form>
      </div>
    </div>
  }
})

ReactDOM.render(<Dashboard />, document.getElementById('app'))

package.json

{
  "dependencies": {
    "classnames": "2.2.5",
    "react": "15.2.0",
    "react-dom": "15.2.0",
    "uuid": "2.0.2"
  },
  "devDependencies": {
    "nwb": "0.11.0"
  },
  "scripts": {
    "build": "react build app.js",
    "start": "react run app.js"
  }
}