title: The right or standard way to play DOM in reactjs
body: <p>I have two divs, what I want to achieve is that, when I click <code>div left_1</code> then div <code>right_1</code> set <code>aria-selected=true</code> and <code>right_2</code> set <code>aria-selected=false</code>, the same behavior for <code>left_2</code> etc </p>
  
  <pre><code>+------------+      +-------------+ 
  | div left_1 |      | div right_1 |
  +------------+      +-------------+ 
  
  +------------+      +-------------+ 
  | div left_2 |      | div right_2 |
  +------------+      +-------------+ 
  
  ...
  </code></pre>
  
  <p>DOM can be easily played by vanilla JavaScript, something like</p>
  
  <pre><code>document.getElementByClassName('left_1')[0].addEventListener('click', e =&gt; {
    document.getElementByClassName('right_1')[0].setAttribute('aria-selected',  true)
  })
  </code></pre>
  
  <p>if need to make it more programming, we can do it <code>left_{number}</code> then change <code>right_{number}</code>'s attributes accordingly</p>
  
  <p>I can do this way as well in react code, although reactjs uses virtual DOM, I found I am still able to use <code>document.getElementByClassName</code> or <code>querySelector</code> etc to select DIVs. However, I don't think that is a right/standard way to do. </p>
  
  <p>My question is that, when we need to manipulate DOM quite often, do we just do multiple <code>Refs</code> like <code>this.left1 = React.createRef()</code> <code>ref={this.left1}</code>  <code>this.left2 = React.createRef()</code> <code>ref={this.left2}</code>... or there are some other ways to do. I am bit unclear on the DOM part.</p>