title: react how to add event listeners to multiple elements at once
body: <p>To demonstrate my question, I'll compare vanilla javascript and react. In javascript, when I have</p>
  <pre><code>&lt;div&gt;
  &lt;button class=&quot;btn&quot;&gt;1&lt;/button&gt;
  &lt;button class=&quot;btn&quot;&gt;2&lt;/button&gt;
  &lt;button class=&quot;btn&quot;&gt;3&lt;/button&gt;
  &lt;button class=&quot;btn&quot;&gt;4&lt;/button&gt;
  &lt;button class=&quot;btn&quot;&gt;5&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  <p>and I want to add some functionality to all buttons, I can do</p>
  <pre><code>const buttons = document.querySelectorAll(&quot;.btn&quot;);
  buttons.forEach(btn=&gt;{
     btn.addEventListener(&quot;click&quot;,(e)=&gt;{
         //some code here
     })
  })
  </code></pre>
  <p>In react, how can I do the same thing, instead of adding &quot;onClick&quot; to every single button? Because imagine if there are 20 buttons like this:</p>
  <pre><code>&lt;button className=&quot;btn&quot; onClick={()=&gt;{
     //some code here
  }}&gt;button&lt;/button&gt;
  </code></pre>
  <p>I could still use querySelector like the javascript way, but I heard that is a bad practice in react. So I wonder if there is any other way that can make the code cleaner.</p>