reactjs get select values - always undefined
<p>I'm quite new to reactjs, so I wrote a fairly simple page to test a 'dynamic' <code>&lt;select&gt;</code> options and how to get the selected value. What I wanted to do was on submit, be able to get the selected values by iterating through the <code>this.refs</code> but I'm getting undefined values. I'm not sure how to make it work in a controlled manner using the handle change so I opted to go the uncontrolled approach. However I'd like to know how to do it both ways. Or is there a neater/preferred way to get the selected values on form submit?</p>

<p>Also in the rendering of the select, why can't I add a <code>ref={this.props.formId}</code> there instead of on the OptionsList? If i remove the ref on OptionsList and have it in the select then it doesn't recognise any select inputs.</p>

<pre><code>var data1 = [
  { Id: 1, Name: "Option 1", Value: "Value 1" },
  { Id: 2, Name: "Option 2", Value: "Value 2" },
  { Id: 3, Name: "Option 3", Value: "Value 3" }
];

var data2 = [
  { Id: 4, Name: "Option 4", Value: "Value 4" },
  { Id: 5, Name: "Option 5", Value: "Value 5" },
  { Id: 6, Name: "Option 6", Value: "Value 6" }
];

var FormOptionList = React.createClass({
    handleSubmit: function (e) {
        e.preventDefault();

        for (var ref in this.refs) {
            console.log(this.refs[ref].value);
        }

        return;
    },
    render: function () {
        return (
          &lt;div className="formList"&gt;
              &lt;form onSubmit={this.handleSubmit}&gt;
                  &lt;div&gt;
                    &lt;OptionsList key="ListA" formId="ListA" options={this.props.data1} ref="ListA" /&gt;
                    &lt;br /&gt;
                    &lt;OptionsList key="ListB" formId="ListB" options={this.props.data2} ref="ListB" /&gt;
                  &lt;/div&gt;
                  &lt;input type="submit" value="Post" /&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      );
    }
});

var OptionsList = React.createClass({
    //getInitialState: function () {
    //    return {
    //        options: [],
    //        selectValue: 'Option 1'
    //    };
    //},
    //handleChange: function(e) {
    //    this.setState({ selectValue: e.target.value })
    //},
    getInitialState: function () {
        return {
            options: []
        };
    },
    render: function () {
        var optionsList = this.props.options.map(function (option) {
            return (
                &lt;option key={option.Id} value={option.Value}&gt;{option.Name}&lt;/option&gt;
            )
        });
        return (
            &lt;select&gt;
                {optionsList}
            &lt;/select&gt;
        );
    }
});

ReactDOM.render(
  &lt;FormOptionList data1={data1} data2={data2} /&gt;,
  document.getElementById('content')
);
</code></pre>