React ref attribute access with name string that needed to be concatenated

Question

In React/javascript, there is a map function like this

{this.state.caseDetails.plaintiff.map((p, i)=>{
  return(
    <div className={`col-lg-${inputWidth}`}>
      <input type="hidden" ref={'plaintiff_id_' + i} value={p.id} />
      <input type='text' ref={'plaintiff_name_' + i} className='form-control' defaultValue={p.name}/>
    </div>
  )
})}

I created the attributes as above plaintiff_id_0 up to the size of array by concatenate the i variable. However, the problem now is that i would like to get the value of those data using ref, So i created a for loop like this:

for (var i = 0 ; i < this.state.caseDetails.plaintiff.length; i++) {
      console.log(this.refs.("plaintiff_id_".concat(i)).value);
      //Tried this.refs.("plaintiff_id_"+i).value etc.
}

And also different kind of version to concat i to the string, but it keeps telling me that this is a syntax error, is there anyway to access these ref as i want?

Phi Nguyen · Accepted Answer · 2016-09-08 06:53:28Z

4

Try this :

for (var i = 0 ; i < this.state.caseDetails.plaintiff.length; i++) {
      console.log(this.refs["plaintiff_id_".concat(i)].value);
  //OR
      console.log(this.refs["plaintiff_id_" + i].value);
}

answered Sep 8, 2016 at 6:53

Phi Nguyen

3,0561 gold badge16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PSo Over a year ago

Pick this as answer as it solved it clean and clearly and the fastest response.

Kafo · Accepted Answer · 2016-09-08 06:38:19Z

1

You can use bracket notation and do: this.refs['plaintiff_id_' + i].

answered Sep 8, 2016 at 6:38

Kafo

3,6561 gold badge14 silver badges19 bronze badges

Comments

arijeet · Accepted Answer · 2016-09-08 06:52:41Z

1

You should be able to access the DOM element using refs as follows:

for (var i = 0 ; i < this.state.caseDetails.plaintiff.length; i++) {

  var plaintiffIdRef = "plaintiff_id_" + i;
  console.log(React.findDOMNode(this.refs[plaintiffIdRed]).value)

  var plaintiffNameRef = "plaintiff_name_" + i;
  console.log(React.findDOMNode(this.refs[plaintiffNameRef]).value)

}

edited Sep 8, 2016 at 6:52

answered Sep 8, 2016 at 6:44

arijeet

1,88418 silver badges28 bronze badges

Collectives™ on Stack Overflow

React ref attribute access with name string that needed to be concatenated

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related