React: Utilising QuerySelectorAll in Component

Question

What would be the best way of incorporating this JS code with React?

  document.querySelectorAll(".servicesaffectedtag").forEach((tag) => {
    tag.addEventListener("click", (event) => {
      tag.classList.toggle("active-tag");
    });
  });

Is this something that would need to go into the ComponentDidMount() function?

Thanks in advance!

Using querySelectorAll() and addEventListener() would be the way you'd do things if you weren't using React. In React, you should be defining event behaviour within your render() method — Nick Parsons
– Nick Parsons, Commented Mar 7, 2021 at 12:43

Simon · Accepted Answer · 2021-03-07 12:45:00Z

1

In react, you can refer to elements using refs. (https://reactjs.org/docs/refs-and-the-dom.html)

However, a better solution would be putting an onClick listener on each element, and changing the class based on state with the ternary operator (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) like this:

<tag 
onClick={() => { classActive ? setClassActive(false) : setClassActive(true) }} className={classActive ? "active-tag" : "" }
>
</tag>

answered Mar 7, 2021 at 12:45

Simon

231 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

yush Over a year ago

Thanks Simon! Any idea on what the state would look like?

Collectives™ on Stack Overflow

React: Utilising QuerySelectorAll in Component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related