title: Reactjs - Adding ref to input in dynamic element render
body: <p>I'm trying to focus/highlight input text onClick in React. It works as expected, but only on the last element in the rendered array. I've tried several different methods but they all do the exact same thing. Here are two examples of what I have:</p>
  
  <pre><code>export default class Services extends Component {
  
  handleFocus(event) {
      event.target.select()
  }
  
  handleClick() {
      this.textInput.focus()
  }
  
  
  render() {
      return (
          &lt;div&gt;
              {element.sources.map((el, i) =&gt; (
                  &lt;List.Item key={i}&gt;
                  &lt;Segment style={{marginTop: '0.5em', marginBottom: '0.5em'}}&gt;
                      &lt;Input fluid type='text'
                          onFocus={this.handleFocus}
                          ref={(input) =&gt; { this.textInput = input }} 
                          value='text to copy'
                          action={
                              &lt;Button inverted color='blue' icon='copy' onClick={() =&gt; this.handleClick}&gt;&lt;/Button&gt;
                          }
                      /&gt;
                  &lt;/Segment&gt;
                  &lt;/List.Item&gt;
              ))}
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>If there's only one element being rendered, it focuses the text in the input, but if there are multiple elements, every element's button click selects only the last element's input. Here's another example:</p>
  
  <pre><code>export default class Services extends Component {
  
  constructor(props) {
      super(props)
  
      this._nodes = new Map()
      this._handleClick = this.handleClick.bind(this)
  }
  
  handleFocus(event) {
      event.target.select()
  }
  
  handleClick(e, i) {
      const node = this._nodes.get(i)
      node.focus()
  }
  
  
  render() {
      return (
          &lt;div&gt;
              {element.sources.map((el, i) =&gt; (
                  &lt;List.Item key={i}&gt;
                  &lt;Segment style={{marginTop: '0.5em', marginBottom: '0.5em'}}&gt;
                      &lt;Input fluid type='text'
                          onFocus={this.handleFocus}
                          ref={c =&gt; this._nodes.set(i, c)} 
                          value='text to copy'
                          action={
                              &lt;Button inverted color='blue' icon='copy' onClick={e =&gt; this.handleClick(e, i)}&gt;&lt;/Button&gt;
                          }
                      /&gt;
                  &lt;/Segment&gt;
                  &lt;/List.Item&gt;
              ))}
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>Both of these methods basically respond the same way. I need the handleClick input focus to work for every dynamically rendered element. Any advice is greatly appreciated. Thanks in advance!</p>
  
  <p><em>The <code>Input</code> component is imported from Semantic UI React with no additional implementations in my app</em></p>
  
  <p><strong>UPDATE</strong>
  Thanks guys for the great answers. Both methods work great in a single loop element render, but now I'm trying to implement it with multiple parent elements. For example:</p>
  
  <pre><code>import React, { Component } from 'react'
  import { Button, List, Card, Input, Segment } from 'semantic-ui-react'
  
  export default class ServiceCard extends Component {
  
  handleFocus(event) {
      event.target.select()
  }
  
  handleClick = (id) =&gt; (e) =&gt; {
      this[`textInput${id}`].focus()
  }
  
  render() {
      return (
          &lt;List divided verticalAlign='middle'&gt;
              {this.props.services.map((element, index) =&gt; (
                  &lt;Card fluid key={index}&gt;
                      &lt;Card.Content&gt;
                          &lt;div&gt;
                              {element.sources.map((el, i) =&gt; (
                                  &lt;List.Item key={i}&gt;
                                      &lt;Segment&gt;
                                          &lt;Input fluid type='text'
                                              onFocus={this.handleFocus}
                                              ref={input =&gt; { this[`textInput${i}`] = input }} 
                                              value='text to copy'
                                              action={
                                                  &lt;Button onClick={this.handleClick(i)}&gt;&lt;/Button&gt;
                                              }
                                          /&gt;
                                      &lt;/Segment&gt;
                                  &lt;/List.Item&gt;
                              ))}
                          &lt;/div&gt;
                      &lt;/Card.Content&gt;
                  &lt;/Card&gt;
              ))}
          &lt;/List&gt;
      )
  }
  </code></pre>
  
  <p>Now, in the modified code, your methods work great for one <code>Card</code> element, but when there are multiple <code>Card</code> elements, it still only works for the last one. Both <code>Input</code> <code>Buttons</code> work for their inputs respectively, but only on the last <code>Card</code> element rendered.</p>