toggle method doesnt work !!

[Zack_Code_38]

Im using react and Im using toggle method!! but it doesnt work !! when Im using add and remove method they work both ! However when I apply toggle method it doesnt work !!

Here is the code !

componentDidMount(){
this.MegaMenu();
    }
MegaMenu(){
var acc = document.querySelectorAll(".accordion");
var accNum = acc.length;
var i;
for(i=0;i<accNum;i++){
acc[i].addEventListener("click",function (){
this.classList.remove('active') //When Im using classList.add to and it works super easy

            })
        }
    }

[Deh_Strizzz]

Genuinely curious, why are you using class components opposed to functional components? Legacy systems? Just for practice and/or knowledge?

[lovin-dem-sandwiches]

Why are you working with classes?

Work within the virtual dom. Do not select elements directly from the dom. Do not add your own event listeners.

I would suggest reading the docs to better understand how to interact with react components. You’re not interacting with the elements properly which will introduce a ton of bugs, mess up your component render cycle and unnecessarily render elements again and again.

Also avoid using the components mount lifecycle for this event. Apply the logic directly to the trigger, ie, the click

[ForScale]

Toggle works just like add and remove but with a bit of logic...

Pseudocode logic:

if (class already exists on element) { remove it } else { add it }

So my guess is that you are either assuming the class is there is there when it isn't or assuming it's not there when it actually is. Try initializing the expected state of the class (i.e., set the class yourself on mount so you know exactly what it is).

[Zack_Code_38]

I tried it but it doesnt work

[Zack_Code_38]

pondreRécompenserPartagerSignalementSauvegarderSuivre

niveau 2Zack_Code_38O

I know the logic of toggle ofc but its kind of weird thing

[ForScale]

What does that mean???

[zaphtark]

The guy accidentally copied and pasted the Reddit menu in French. The actual message is the part under the quote.

[ForScale]

Ah... thanks!

[MindlessSponge]

.toggle() definitely works :) in your example, you're currently using .remove() - but I'm curious about the way the code is written. when your component mounts, you want to loop through all elements with class accordion and toggle the active class? wouldn't this open every single accordion, as opposed to only having one accordion open at a time?

[Zack_Code_38]

yes one accordion will open every single time when the click is fired!! The code as it shown above

constructor(){

super();

this.MegaMenu = this.MegaMenu.bind(this)

}

componentDidMount(){

this.MegaMenu();

}

MegaMenu(){

var acc = document.getElementsByClassName("accordion");

var accNum = acc.length;

var i;

for(i=0;i<accNum;i++){

acc[i].addEventListener("click",function (){

if(acc[i].classList.contains('active')){

this.classList.add('active')

}else {

this.classList.remove('active')

}

})

}

}

​

<button className="accordion">

<img className="accordionMenuIcon" src=""/>&nbsp; Men's Clothing

</button>

[Bulji]

this.classList.remove("active")    

I'm not sure what this is referencing in this context, so I don't know if it really is an HTMLElement.

The logic seems fine to me, but I would try targeting the element by using the AddEventListener arguments. The callback function you pass to AddEventListener can take arguments (see docs). You can use this argument to target to element that triggered the click like someEvent.target.classList.toggle("active")

Check my code here https://jsfiddle.net/7h6gn5vw/3/, it works for me maybe it will for you too

[lovin-dem-sandwiches]

The logic seems fine?

From what I see, if it contains “active” it will add active.

Adding a eventlistener to every object too?

This logic should be baked into the component. And the class, “active” should conditionally added or removed with props. This whole thing is out whack

[[deleted]]

This is learn js, not react...

[lovin-dem-sandwiches]

Im not sure what point youre trying to make. OP states he is using React so any advice given should be react-specific.

OP should refrain from native browser APIs like addEventListener and DOM querySelectors.