ReactJS DOM dynamic refs [duplicate]

Question

I have a table that contains rows and I want to be able to use getDOMNode to modify the DOM.

Normally I would define the ref of the component ref="mytable" and then get the ref using this.refs.mytable.getDOMNode(); I want to be able to create the ref name depending on an id.

How can I get that DOM with the ref={"row" + val.id)? I tried using brackets this.refs['row' + i]getDOMNode(); but I still get an error, here is a fiddle: https://jsfiddle.net/ux4rL8sf/4/

onRowClick: function (i) {
  var x = this.refs['row' + i]getDOMNode();
  //Do Something with x
},
var Items = this.state.currentItems.map(function(val) {
  return (
    <tr ref={"row" + val.id} onClick={this.onRowClick.bind(this, val.id) }> </tr>
   )
 });

Answer 1

You're almost there, just use the bracket notation like this

onRowClick: function (i) {
  var x = this.refs['row' + i].getDOMNode();
  //Do Something with x
}