title: Why my javaScript code in not working with my react Component?
body: <p>I cannot add client-side javaScript into my React App component (LeftSection.js). Can anyone please tell me what is wrong with my code? The one possible answer is that I am adding my javaScript code before JSX (HTML) which does not allow it to work. So, where should I put my script? Also, I am sure that I am also not allowed to put  tag in the JSX code.</p>
  <p>Here is the code:</p>
  <pre><code>import './LeftSection.css';
  import React from 'react';
  
  function LeftSection () {
      var coll = document.getElementsByClassName(&quot;collapsible&quot;);
      var i;
  
      for (i = 0; i &lt; coll.length; i++) {
          coll[i].addEventListener(&quot;click&quot;, function() {
              this.classList.toggle(&quot;active&quot;);
              var content = this.nextElementSibling;
              if (content.style.display === &quot;block&quot;) {
                  content.style.display = &quot;none&quot;;
              } else {
                  content.style.display = &quot;block&quot;;
              }
          });
      }
      
      return (
          &lt;div className = 'left-section'&gt;
          &lt;div id = &quot;tool_tree&quot;&gt;
              
              &lt;ul&gt;
  
                  &lt;li&gt;
                      &lt;a className = &quot;collapsible&quot;&gt;CLM&lt;/a&gt;
                      &lt;ul className = &quot;content&quot;&gt;  
                          &lt;li&gt;
                              &lt;a className = &quot;collapsible&quot;&gt;Commons&lt;/a&gt;
                              &lt;ul className = &quot;content&quot;&gt; 
                                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Workstation&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          
                          &lt;li&gt;
                              &lt;a className = &quot;collapsible&quot;&gt;Electrical Characterization&lt;/a&gt;
                              &lt;ul className = &quot;content&quot;&gt;
                                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;ECL: 4294A Precision Impedance Analyzer&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;ECL: Cascade 1200 (room temp)&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
  
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;/div&gt;
      );
  };
  
  export default LeftSection;
  </code></pre>
  <p>I will really appreciate your help!
  Thanks.</p>
  <p>EDIT (for the subsequent problem I'm facing):</p>
  <pre><code>import './LeftSection.css';
  import React, { useState } from 'react';
  
  
  function LeftSection () {
      const [show, setShow] = useState(false);
      
      return (
          &lt;div className = 'left-section'&gt;
          &lt;div id = &quot;tool_tree&quot;&gt;
              
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;a className = &quot;collapsible&quot; onClick={() =&gt; setShow(!show)}&gt;CLM&lt;/a&gt;
                      {show &amp;&amp; (
                      &lt;ul className = &quot;content&quot;&gt;  
                          &lt;li&gt;
                              &lt;a className = &quot;collapsible&quot;&gt; Commons&lt;/a&gt;
                              &lt;ul className = &quot;content&quot;&gt; 
                                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;MCL Commons Imaging Workstation&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          
                          &lt;li&gt;
                              &lt;a className = &quot;collapsible&quot;&gt;Electrical Characterization&lt;/a&gt;
                              &lt;ul className = &quot;content&quot;&gt;
                                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;ECL: 4294A Precision Impedance Analyzer&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;ECL: Cascade 1200 (room temp)&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;ECL: Ecopia HMS-3000 Hall Measurement&lt;/a&gt;&lt;/li&gt;
  
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a className = &quot;collapsible&quot;&gt;Electron Microscopy&lt;/a&gt;
                              &lt;ul className = &quot;content&quot;&gt;
                                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;EPMA: CAMECA SXFive&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;ESEM: Q250&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;EXpressLO LLC Station $0&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                      )}
                  &lt;/li&gt;
                  
  
  
  
  
  
  
                  &lt;li&gt;
                      &lt;a className = &quot;collapsible&quot; onClick={() =&gt; setShow(!show)}&gt; 2DC &lt;/a&gt;
                      {show &amp;&amp; (
                      &lt;ul className = &quot;content&quot;&gt;  
                          &lt;li&gt;
                              &lt;a className = &quot;collapsible&quot;&gt;Commons&lt;/a&gt;
                              &lt;ul className = &quot;content&quot;&gt; 
                                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;MCL Commons Imaging Workstation&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                               &lt;a className = &quot;collapsible&quot;&gt;Electrical Characterization&lt;/a&gt; 
                              &lt;ul className = &quot;content&quot;&gt;
                                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;ECL: Poling&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;ECL: Seebeck&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;ECL: Sonelastic&lt;/a&gt;&lt;/li&gt;
                                  
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                      )}
                  &lt;/li&gt;
  
  
  
  
  
  
                  &lt;li&gt;
                      &lt;a className = &quot;collapsible&quot; onClick={() =&gt; setShow(!show)}&gt; Nanofab &lt;/a&gt;                        
                      {show &amp;&amp; (
                      &lt;ul className = &quot;content&quot;&gt;  
                          &lt;li&gt;
                          &lt;a className = &quot;collapsible&quot;&gt;Commons&lt;/a&gt;
                              &lt;ul className = &quot;content&quot;&gt; 
                                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;MCL Commons Imaging Workstation&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                          &lt;a className = &quot;collapsible&quot;&gt;Electrical Characterization&lt;/a&gt; 
                              &lt;ul className = &quot;content&quot;&gt;
                                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;ECL: Poling&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;ECL: Seebeck&lt;/a&gt;&lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                      )}
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      );
      
  };
  
  
  export default LeftSection;
  </code></pre>