title: Reactjs how to use ref inside map function?
body: <p>I'm mapping through an array and for each item display a button with text. Say I want that on clicking the button, the text underneath will change its color to red. How can I target the sibling of the button? I tried using ref but since it's a mapped jsx, only the last ref element will be declared.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>class Exams extends React.Component {
      constructor(props) {
          super()
          this.accordionContent = null;
      }
      state = {
          examsNames: null, // fetched from a server
      }
      accordionToggle = () =&gt; {
          this.accordionContent.style.color = 'red'
      }
      render() {
          return (
              &lt;div className="container"&gt;
                  {this.state.examsNames &amp;&amp; this.state.examsNames.map((inst, key) =&gt; (
                      &lt;React.Fragment key={key}&gt;
                          &lt;button onClick={this.accordionToggle} className="inst-link"&gt;&lt;/button&gt;
                          &lt;div ref={accordionContent =&gt; this.accordionContent = accordionContent} className="accordionContent"&gt;
                              &lt;p&gt;Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aperiam, neque.&lt;/p&gt;
                          &lt;/div&gt;    
                      &lt;/React.Fragment&gt;
                  ))}
              &lt;/div&gt;
          )
      }
  }
  
  
  export default Exams;
  </code></pre>
  
  <p>As explained, the outcome is that on each button click, the paragraph attached to the last button will be targeted.</p>
  
  <p>Thanks in advance</p>