Reactjs how to use ref inside map function? : <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>
