I render collection of input elements for objects in array.

render: function() {

    var ranges = [];

    this.props.ranges.map(function(range, index) {

        var rangeElement = <Input type=text

            value={range.name} onChange={this.changeRangeName.bind(this)} />

        ranges.push(rangeElement);

    }, this);



    // render ranges

}

this allows me to write onChange handler function:

changeRangeName: function (event) {

    var newName = event.target.value;

},

but in this handler I need id of range object I want to change. So I could change change how I create input elements in render function and change:

var rangeElement = <Input type=text

            value={range.name}

            onChange={this.changeRangeName.bind(this, range.id)} />

Now my handler will receive range.id as parameter but now I don't have the newName value. I can get it using refs

var rangeElement = <Input type=text

            ref={'range' + range.id}

            value={range.name}

            onChange={this.changeRangeName.bind(this, range.id)} />

This is the only solution I know but I suspect there is better one.