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?