2

Hi I am very new to ReactJS. I am building a Sidebar navigation for a website. The navigation has 3 levels so i built a recursive navigation bar with below logic:

for all items in the array
  if item has childern
    buildNavigation()
  else return;
}

Initially all children are hidden but on-click of a menu-item I "make it visible" by traversing the DOM.

enableDropdown(e) {
  e.stopPropagation();
  let dropdownContent = e.currentTarget.getElementsByClassName(
    'dropdown-container'
  )[0];
  let directionIcon = e.currentTarget.getElementsByClassName(
    'menu-direction'
  )[0];
  // Toggle dropdown & animate caret symbol
  if (dropdownContent.style.display === 'block') {
    directionIcon.classList.add('direction-icon-reset');
    directionIcon.classList.remove('direction-icon-active');
    dropdownContent.style.display = 'none';
  } else {
    directionIcon.classList.add('direction-icon-active');
    directionIcon.classList.remove('direction-icon-reset');
    dropdownContent.style.display = 'block';
  }
}

enableSubMenu(e, link) {
  e.stopPropagation();
  this.props.history.push(link);
  let lis = document.getElementsByClassName('no-child');
  for (let i = 0; i < lis.length; i++) {
    lis[i].classList.remove('active');
  }
  e.currentTarget.classList.add('active');
}

But received a huge backlash during code review for doing the DOM manipulation directly.

So Is it good practice to manipulate DOM in ReactJS?

What did I miss? What should I know before building ReactJS Apps?

4
  • 2
    No, it's a bad practice. React is using ref instead.
    – demkovych
    Jan 23, 2020 at 13:59
  • 3
    But he doesn't even need to use refs in this case! refs should not be used for DOM manipulation like this. That is a bad practice of it's own. Jan 23, 2020 at 14:01
  • 1
    It's definitely bad practice
    – svltmccc
    Jan 23, 2020 at 14:03
  • Thanks all will improve my style. Jan 24, 2020 at 10:07

1 Answer 1

5

In most cases, and I really mean most cases, you would not need to manipulate the DOM. So Yeah it's not good practice especially in this case where you can use JSX very easily to conditionally toggle those classes inside of your render method. Doing it this way is basically not using React for it's main purpose which is keeping the DOM up to date with the state of your application. As far as what you need to know before you develop in React, basically if you read a little bit of the documentation you'll realize how easily you can utilize state and JSX to solve these problems a lot easier and in a way more maintainable and readable fashion.

One reason I might add for this is handling the UI state of your application without React and manually manipulating DOM is very error prone and hard to maintain. It will get out of control quite fast and lead to hard to debug issues regarding a poorly maintained state.

https://reactjs.org/docs/state-and-lifecycle.html

5
  • 1
    That's certainly an opinion, and possibly a popular one. Do you have any references or objective data to back up the opinion? Jan 23, 2020 at 14:04
  • @HereticMonkey You wouldn't need anything more than common sense and some large scale programming experience to derive why this is bad practice. Handling the state of the application with variables and if statement gets very messy and complicated very fast. It's more error prone and harder to maintain. Does it need to be official for it to be bad practice? Jan 23, 2020 at 14:07
  • @HereticMonkey Also aren't good practices all popular opinions between developers? :) Jan 23, 2020 at 14:09
  • Yes, that's why almost all questions about "best practice" on Stack Overflow are closed as "opinion based", unless they can be backed by objective measurements or official sources. Otherwise, someone else can post another answer that says the opposite and be just as correct. Jan 23, 2020 at 14:12
  • @HereticMonkey I don't think it applies in this case. The main purpose of React is how it tracks the changes in DOM and keeps it up to date with state. I think not using a library for what it's actually created for is a bad practice. Of course you could say that's my opinion but is there really an advantage to manipulating DOM like this in React? I think not Jan 23, 2020 at 14:15

Not the answer you're looking for? Browse other questions tagged or ask your own question.