Why my javaScript code in not working with my react Component?

Question

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.

Here is the code:

import './LeftSection.css';
import React from 'react';

function LeftSection () {
    var coll = document.getElementsByClassName("collapsible");
    var i;

    for (i = 0; i < coll.length; i++) {
        coll[i].addEventListener("click", function() {
            this.classList.toggle("active");
            var content = this.nextElementSibling;
            if (content.style.display === "block") {
                content.style.display = "none";
            } else {
                content.style.display = "block";
            }
        });
    }
    
    return (
        <div className = 'left-section'>
        <div id = "tool_tree">
            
            <ul>

                <li>
                    <a className = "collapsible">CLM</a>
                    <ul className = "content">  
                        <li>
                            <a className = "collapsible">Commons</a>
                            <ul className = "content"> 
                                <li><a href="#">Workstation</a></li>
                            </ul>
                        </li>
                        
                        <li>
                            <a className = "collapsible">Electrical Characterization</a>
                            <ul className = "content">
                                <li><a href="#">ECL: 4294A Precision Impedance Analyzer</a></li>
                                <li><a href="#">ECL: Cascade 1200 (room temp)</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>

            </ul>
        </div>
        </div>
    );
};

export default LeftSection;

I will really appreciate your help! Thanks.

EDIT (for the subsequent problem I'm facing):

import './LeftSection.css';
import React, { useState } from 'react';


function LeftSection () {
    const [show, setShow] = useState(false);
    
    return (
        <div className = 'left-section'>
        <div id = "tool_tree">
            
            <ul>
                <li>
                    <a className = "collapsible" onClick={() => setShow(!show)}>CLM</a>
                    {show && (
                    <ul className = "content">  
                        <li>
                            <a className = "collapsible"> Commons</a>
                            <ul className = "content"> 
                                <li><a href="#">MCL Commons Imaging Workstation</a></li>
                            </ul>
                        </li>
                        
                        <li>
                            <a className = "collapsible">Electrical Characterization</a>
                            <ul className = "content">
                                <li><a href="#">ECL: 4294A Precision Impedance Analyzer</a></li>
                                <li><a href="#">ECL: Cascade 1200 (room temp)</a></li>
                                <li><a href="#">ECL: Ecopia HMS-3000 Hall Measurement</a></li>

                            </ul>
                        </li>
                        <li>
                            <a className = "collapsible">Electron Microscopy</a>
                            <ul className = "content">
                                <li><a href="#">EPMA: CAMECA SXFive</a></li>
                                <li><a href="#">ESEM: Q250</a></li>
                                <li><a href="#">EXpressLO LLC Station $0</a></li>
                            </ul>
                        </li>
                    </ul>
                    )}
                </li>
                






                <li>
                    <a className = "collapsible" onClick={() => setShow(!show)}> 2DC </a>
                    {show && (
                    <ul className = "content">  
                        <li>
                            <a className = "collapsible">Commons</a>
                            <ul className = "content"> 
                                <li><a href="#">MCL Commons Imaging Workstation</a></li>
                            </ul>
                        </li>
                        <li>
                             <a className = "collapsible">Electrical Characterization</a> 
                            <ul className = "content">
                                <li><a href="#">ECL: Poling</a></li>
                                <li><a href="#">ECL: Seebeck</a></li>
                                <li><a href="#">ECL: Sonelastic</a></li>
                                
                            </ul>
                        </li>
                    </ul>
                    )}
                </li>






                <li>
                    <a className = "collapsible" onClick={() => setShow(!show)}> Nanofab </a>                        
                    {show && (
                    <ul className = "content">  
                        <li>
                        <a className = "collapsible">Commons</a>
                            <ul className = "content"> 
                                <li><a href="#">MCL Commons Imaging Workstation</a></li>
                            </ul>
                        </li>
                        <li>
                        <a className = "collapsible">Electrical Characterization</a> 
                            <ul className = "content">
                                <li><a href="#">ECL: Poling</a></li>
                                <li><a href="#">ECL: Seebeck</a></li>
                            </ul>
                        </li>
                    </ul>
                    )}
                </li>
            </ul>
        </div>
    </div>

    );
    
};


export default LeftSection;

Answer 1

I added the code (without the styling) in an online editor and it's working. Can you be more precise with your question? Also in React you shouldn't grab elements from the dom like you do in Javascript because it cancel all advantages that React brings with virtual DOM. Please check React documentation about passing event handlers to components: https://reactjs.org/docs/faq-functions.html#how-do-i-pass-an-event-handler-like-onclick-to-a-component

Also here a simple hook example for adding an onClick event: https://reactjs.org/docs/hooks-state.html

You should add onClick event to corresponding element from jsx and then handle it in a function that you declare in the same component.

 import React, { useState } from "react"; function LeftSection() { const [show, setShow] = useState(false); return ( <div className="left-section"> <ul> <li> <a>CLM</a> <ul> <li> <a onClick={() => setShow(!show)}>Commons</a> {show && ( <ul className="content"> <li> <a href="#">Workstation</a> </li> </ul> )} </li> </ul> </li> </ul> </div> ); } export default LeftSection;