title: array map react component call child function
body: <p>How can we call child function, if we are using array map in react? I have found a way on googling by using refs but it does not call actual component rather than the last component it registered.</p>
  
  <blockquote>
    <p>Index.jsx</p>
  </blockquote>
  
  <pre><code>setActiveChat = (ID) =&gt; {
      this.refs.chateditor.activateChat(ID);
  }
  
  {
     this.state.users.map((user, index) =&gt; &lt;ChatEditor ref="chateditor"/&gt;)
  }
  </code></pre>
  
  <blockquote>
    <p>ChatEditor.jsx</p>
  </blockquote>
  
  <pre><code>activateChat = (ID) =&gt; {
          alert("Hi i am here!");
  }
  </code></pre>
  
  <p>Thanks @Mayank Shukla</p>
  
  <p>By inspiring from his solution and to avoid usage of refs according to <a href="https://reactjs.org/docs/refs-and-the-dom.html#when-to-use-refs" rel="nofollow noreferrer">DOC</a> 
  I have come up with a solution if anyone wants to use it.</p>
  
  <blockquote>
    <p>Index.jsx</p>
  </blockquote>
  
  <pre><code>    setActiveChat = (ID) =&gt; {
          this[`editor${ID}`](ID);
      }
  
  
      {
      this.state.users.map((user, index) =&gt; &lt;ChatEditor initChat={edtr =&gt;
       (this[`editor${user.ID}`] = edtr)} /&gt;
      }
  </code></pre>
  
  <blockquote>
    <p>ChatEditor.jsx</p>
  </blockquote>
  
  <pre><code>constructor(props) {
          super(props);
          props.initChat(this.activateChat);
      }
  
  activateChat = (ID) =&gt; {
          alert('Hey, I m here')
      }
  </code></pre>