title: reactjs ref only works for last element in array
body: <p>I am having a parent component and a child component. I want to call a function from my child in my parent component. I am using ref and it works fine, but just for my last element in my array...</p>
  <p><strong>Parent:</strong></p>
  <pre><code>onClick = () =&gt; {
    this.child.handleClose(); // do stuff
  };
  
  var items = [];
  tracks.filter(searchingFor(term)).map(function (title, i) {
    items.push(
      &lt;div&gt;
        &lt;ItemViewAll
          onRef={(ref) =&gt; (this.child = ref)}
          triggerOpen={this.handleOpenParent.bind(this)}
          triggerClose={this.handleCloseParent.bind(this)}
          key={title.id}
          title={title.title}
        /&gt;
      &lt;/div&gt;
    );
  }, this);
  </code></pre>
  <p>ItemViewAll is imported from my Child component, where the needed functions are located.</p>
  <p><strong>Child:</strong></p>
  <pre><code>componentDidMount() {
      this.props.onRef(this)    
  }
  
  componentWillUnmount() {
      this.props.onRef(undefined)
  }
      
  handleClose = () =&gt; {
      this.setState({ open: false });
      this.props.triggerClose();
  }
  </code></pre>
  <p>It seems like that the ref works only for the last element in my items[]...</p>
  <p>Do you have any suggestions on how to make it work for every element in my array?</p>
  <p>Here is my full Parent Compoenent, could be heldpful. Still have no clue how to set the ref...</p>
  <p><strong>Parent (complete):</strong></p>
  <pre><code>const { scaleDown } = transitions;
  
  function searchingFor(term) {
    return function (x) {
      return (
        x.title.toLowerCase().includes(term.toLowerCase()) ||
        x.body.toLowerCase().includes(term.toLowerCase())
      );
    };
  }
  
  class ViewAll extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        term: &quot;&quot;,
        mounted: false,
        tracks: [],
        hasMoreItems: true,
      };
  
      this.searchHandler = this.searchHandler.bind(this);
      this.focus = this.focus.bind(this);
    }
  
    loadContent() {
      var requestUrl = this.props.url;
      fetch(requestUrl)
        .then((response) =&gt; {
          return response.json();
        })
        .then((tracks) =&gt; {
          this.setState({ tracks: this.state.tracks.concat(tracks) });
        })
        .catch((err) =&gt; {
          console.log(&quot;There has been an error&quot;);
        });
    }
  
    componentDidMount() {
      var requestUrl = this.props.url;
      fetch(requestUrl)
        .then((response) =&gt; {
          return response.json();
        })
        .then((data) =&gt; {
          this.setState({ tracks: data });
        })
        .catch((err) =&gt; {
          console.log(&quot;There has been an error&quot;);
        });
      window.scrollTo(0, 0);
      this.focus();
    }
  
    handleOpenParent() {
      this.setState({ show: true });
    }
  
    handleCloseParent() {
      this.setState({ show: false });
    }
  
    searchHandler(event) {
      this.setState({ term: event.target.value });
    }
  
    focus() {
      this.textInput.focus();
    }
  
    onClick = () =&gt; {
      this.child.handleClose(); // do stuff
    };
  
    render() {
      const { term, data, tracks } = this.state;
  
      const loader = &lt;div className=&quot;loader&quot;&gt;&lt;/div&gt;;
  
      var items = [];
      tracks.filter(searchingFor(term)).map(function (title, i) {
        items.push(
          &lt;div&gt;
            &lt;MuiThemeProvider&gt;
              &lt;Paper
                style={{
                  borderRadius: &quot;2em&quot;,
                  background:
                    &quot;linear-gradient(to right, #82f2da 30%, white 100%)&quot;,
                }}
                zDepth={1}
              &gt;
                &lt;ItemViewAll
                  onRef={(ref) =&gt; (this.child = ref)}
                  triggerOpen={this.handleOpenParent.bind(this)}
                  triggerClose={this.handleCloseParent.bind(this)}
                  key={title.id}
                  title={title.title}
                  score={title.vote_average}
                  overview={title.body}
                  backdrop={title.image}
                  description={title.description}
                  messenger={title.messenger}
                  twitter={title.twitter}
                  discord={title.discord}
                  slack={title.slack}
                  kik={title.kik}
                  telegram={title.telegram}
                /&gt;
              &lt;/Paper&gt;
            &lt;/MuiThemeProvider&gt;
          &lt;/div&gt;
        );
      }, this);
  
      return (
        &lt;div&gt;
          &lt;header className=&quot;Header&quot;&gt;
            {this.state.show &amp;&amp; (
              &lt;div
                style={{ height: 50, width: 50, background: &quot;red&quot; }}
                onClick={this.onClick}
              &gt;&lt;/div&gt;
            )}
          &lt;/header&gt;
  
          &lt;div&gt;
            &lt;Media query=&quot;(max-width: 599px)&quot;&gt;
              {(matches) =&gt;
                matches ? (
                  &lt;div style={{ marginTop: 100 }}&gt;
                    &lt;div
                      style={{
                        width: &quot;90%&quot;,
                        marginLeft: &quot;auto&quot;,
                        marginRight: &quot;auto&quot;,
                        marginBottom: 50,
                      }}
                    &gt;
                      &lt;MuiThemeProvider&gt;
                        &lt;TextField
                          hintText=&quot;Welcher Bot darf es sein?&quot;
                          type=&quot;Text&quot;
                          onChange={this.searchHandler}
                          value={term}
                          fullWidth={true}
                          underlineFocusStyle={{
                            borderColor: &quot;#82f2da&quot;,
                            borderWidth: 3,
                          }}
                          underlineStyle={{
                            borderColor: &quot;#82f2da&quot;,
                            borderWidth: 1.5,
                            top: &quot;40px&quot;,
                          }}
                          hintStyle={{ fontSize: 30, fontFamily: &quot;Anton&quot; }}
                          inputStyle={{ fontSize: 30, fontFamily: &quot;Anton&quot; }}
                          ref={(input) =&gt; {
                            this.textInput = input;
                          }}
                          style={{ caretColor: &quot;#82f2da&quot; }}
                        /&gt;
                      &lt;/MuiThemeProvider&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                ) : (
                  &lt;div style={{ marginTop: 130 }}&gt;
                    &lt;div
                      style={{
                        width: &quot;80%&quot;,
                        marginLeft: &quot;auto&quot;,
                        marginRight: &quot;auto&quot;,
                        marginBottom: 70,
                      }}
                    &gt;
                      &lt;MuiThemeProvider&gt;
                        &lt;TextField
                          hintText=&quot;Welcher Bot darf es sein?&quot;
                          type=&quot;Text&quot;
                          onChange={this.searchHandler}
                          value={term}
                          fullWidth={true}
                          underlineFocusStyle={{
                            borderColor: &quot;#82f2da&quot;,
                            borderWidth: 3,
                          }}
                          underlineStyle={{
                            borderColor: &quot;#82f2da&quot;,
                            borderWidth: 1.5,
                            top: &quot;50px&quot;,
                          }}
                          hintStyle={{ fontSize: 40, fontFamily: &quot;Anton&quot; }}
                          inputStyle={{ fontSize: 40, fontFamily: &quot;Anton&quot; }}
                          ref={(input) =&gt; {
                            this.textInput = input;
                          }}
                          style={{ caretColor: &quot;#82f2da&quot; }}
                        /&gt;
                      &lt;/MuiThemeProvider&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                )
              }
            &lt;/Media&gt;
  
            &lt;Media query=&quot;(max-width: 599px)&quot;&gt;
              {(matches) =&gt;
                matches ? (
                  &lt;InfiniteScroll
                    pageStart={1}
                    loadMore={this.loadContent.bind(this)}
                    hasMore={this.state.hasMoreItems}
                    loader={loader}
                    initialLoad={false}
                  &gt;
                    &lt;StackGrid
                      columnWidth={180}
                      gutterHeight={10}
                      gutterWidth={10}
                      duration={1500}
                      monitorImagesLoaded={true}
                      easing={easings.quadInOut}
                      appear={scaleDown.appear}
                      appeared={scaleDown.appeared}
                      enter={scaleDown.enter}
                      entered={scaleDown.entered}
                      leaved={scaleDown.leaved}
                    &gt;
                      {items}
                    &lt;/StackGrid&gt;
                  &lt;/InfiniteScroll&gt;
                ) : (
                  &lt;InfiniteScroll
                    pageStart={10}
                    loadMore={this.loadContent.bind(this)}
                    hasMore={this.state.hasMoreItems}
                    loader={loader}
                    initialLoad={true}
                  &gt;
                    &lt;StackGrid
                      columnWidth={180}
                      gutterHeight={80}
                      gutterWidth={80}
                      duration={1500}
                      monitorImagesLoaded={true}
                      easing={easings.quadInOut}
                      appear={scaleDown.appear}
                      appeared={scaleDown.appeared}
                      enter={scaleDown.enter}
                      entered={scaleDown.entered}
                      leaved={scaleDown.leaved}
                    &gt;
                      {items}
                    &lt;/StackGrid&gt;
                  &lt;/InfiniteScroll&gt;
                )
              }
            &lt;/Media&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default ViewAll;
  </code></pre>
  <p>The onClick function schould be called when clicked on the div in my header. But for all elements in my array and not just for the last one.... The onClick function calls again the handleClose() in my Child.</p>